根据选定的值从数据库获取数据。Vue.js + Laravel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34384475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get data from DB based on selected values. Vue.js + laravel
提问by Mistiqe
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:
在前端，我有 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">
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.
所以我需要根据这些选定的选项将百分比值输入到输入字段中。例如，用户选择 USD 和 12 monts，并自动显示所选选项的百分比。如果有人会提供一个简单的例子会很高兴。
回答by mul14
You can use computedproperties and ajax call. Everytime user change the option, the percent in text box will re-evaluate. Here the example using VueJS and vue-resource.
您可以使用计算属性和 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;
}
}
});
Here the snippet http://jsbin.com/qorovo/edit?html,js,output
这里的片段http://jsbin.com/qorovo/edit?html,js,output
From the Laravel side, you could return simple JSON
从 Laravel 方面，您可以返回简单的 JSON
Route::get('/get_percent/{currency}/{period}', function($currency, $period)
{
return App\Deposit::where('currency', $currency)
->where('period', $period)
->first();
});
回答by Chaudhry Waqas
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
我不能给你确切的代码，但我可以帮助你
步骤 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();
}
});
Step 3
Set up the route
Route::post('home', 'MyController@getData')
Step 3
设置路由Route::post('home', 'MyController@getData')
Step 4
in your controller
控制器中的第 4 步
class MyController extends Controller{
public function getData(){
//fetch data from db
return data;
}
}
