Получить данные из БД на основе выбранных значений. Vue.js + Laravel

Question

У меня есть таблица с банковскими депозитами, содержащими следующие строки:

 currency | period | percents. 

На интерфейсе у меня есть 2 выбора полех и 1 вход:

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

Так что мне нужно, чтобы получить значение процента в поле ввода в зависимости от этих выбранных опций. Например, пользователь выбирает доллары США и 12 месяцев и автоматически отображает проценты для выбранных опций. Если кто-то предоставит простой пример, он будет очень доволен.

Answer 1

Вы можете использовать computed свойства и Ajax вызова. Каждый раз, когда пользователь меняет параметр, процент в текстовом поле будет переоцениваться. Вот пример использования VueJS и 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; 
    } 
    } 

}); 

Вот фрагмент кода http://jsbin.com/qorovo/edit?html,js,output

Со стороны Laravel, вы можете вернуть простую JSON

Route::get('/get_percent/{currency}/{period}', function($currency, $period) 
{ 
    return App\Deposit::where('currency', $currency) 
         ->where('period', $period) 
         ->first(); 
}); 

Answer 2

Я не могу дать вам точный код, но я могу помочь вам
Шаг 1
определить, когда пользователь выбрать параметры с помощью jQuery or JavaScript
Шаг 2
затем отправить AJAX запрос на контроллер, как этот

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

     } 
     }); 

Шаг 3
Настройка маршрута Route :: пост ('дом', 'MyController @ GetData')

Шаг 4
в контроллере

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