根据选定的值从数据库中获取数据。 Vue.js + laravel

Question

我有一个 table 银行存款，其中包含下一行：

        currency | period | percents.

在前端我有 2 个 select 字段和 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">

所以我需要根据这些 selected 选项在输入字段中获取百分比值。例如用户 selects 美元和 12 个月，并自动显示 selected 选项的百分比。如果有人能提供一个简单的例子会很高兴。

Answer 1

我不能给你确切的代码，但我可以帮助你
步骤 1
使用 jQuery or JavaScript
检测用户何时 select 选项 第 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::post('home', 'MyController@getData')

步骤 4
在你的控制器中

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

Answer 2

您可以使用 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;
    }
  }

});

这里是片段http://jsbin.com/qorovo/edit?html,js,output

从 Laravel 方面，您可以 return 简单 JSON

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

根据选定的值从数据库中获取数据。 Vue.js + laravel

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

laravel

vue.js