Ad

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

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
Ad