Get data from DB based on selected values. Vue.js + laravel
Ad
I have a table with bank deposits wich contains the next rows:
currency | period | percents.
On frontend i have 2 select fields and 1 input:
<select name="currency" class="form-control" v-model="currency">
<option>USD</option>
<option>EUR</option>
</select>
<select name="period" class="form-control" v-model="period">
<option>6</option>
<option>12</option>
<option>24</option>
</select>
<input class="form-control" type="text" value="@{{ percents }}" v-model="percents">
So I need to get a percents value into input field depending on these selected options. For example user selects USD and 12 monts, and automatically appears percentages for selected options. If somebody will provide just a simple example would be very happy.
Ad
Answer
Ad
You can use computed properties and ajax call. Everytime user change the option, the percent in text box will re-evaluate. Here the example using VueJS and vue-resource.
new Vue({
el: '#app',
data: {
currency: '',
period: '',
},
computed: {
percents() {
var url = "/get_percent/" + this.currency + '/' + this.period;
this.$http.get(url, function(response){
return response.percents;
});
return this.currency + ' - ' + this.period;
}
}
});
Here the snippet http://jsbin.com/qorovo/edit?html,js,output
From the Laravel side, you could return simple JSON
Route::get('/get_percent/{currency}/{period}', function($currency, $period)
{
return App\Deposit::where('currency', $currency)
->where('period', $period)
->first();
});
Ad
source: stackoverflow.com
Related Questions
Ad
- → "failed to open stream" error when executing "migrate:make"
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS - Conditionally Load a Different Page
- → Make a Laravel collection into angular array (octobercms)
- → In OctoberCMS how do you find the hint path?
- → How to register middlewares in OctoberCMS plugin?
- → Validating fileupload(image Dimensions) in Backend Octobercms
- → OctoberCMS Fileupload completely destroys my backend
- → How do I call the value from another backed page form and use it on a component in OctoberCms
Ad