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

Question

I have a table with bank deposits which 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 percentage value into input field depending on these selected options. For example user selects USD and 12 months, and automatically appears percentages for selected options. If somebody will provide just a simple example I would be very happy.

Answer 1

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();
});

Answer 2

I can not give you exact code but I can help you
Step 1
Detect when the user select options using jQuery or JavaScript
Step 2
then send an ajax request to controller like this

$.ajax({
            url: "/home",
            type: 'post or get',
            data: data to send to server,
            success: function(){
                console.log("success");
            },
        error: function(){
            $(".necessary-fields").show();

        }
        });

Step 3
Set up the route Route::post('home', 'MyController@getData')

Step 4
in your controller

class MyController extends Controller{
    public function getData(){
        //fetch data from db
        return data;
    }
}