Get data from DB based on selected values. Vue.js + laravel

- 1 answer


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">

            <select name="period" class="form-control" v-model="period">

        <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.




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,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)