是否可以预先设置选择框的选定值?
使用Vue(v2),我试图在Vue模板中创建这样的选择框。
<select v-model="selectedFlavor">
<option v-for="flavor in flavors"
:value="flavor"
:selected="selectedFlavor == flavor">{{ flavor }}</option>
</select>
这样的组件:
Vue.component('flavor-pane', {
...
data: function() {
selectedFlavor: 'strawberry',
flavors: ['blueberry', 'lime', 'strawberry'],
});
}
基本上,我的想法是我需要遍历一个简单的数组,在选择框中创建几个选项,并将选择框的值设置为现有值。我可以这样做吗?
我的模板/组件渲染正常,但即使满足条件且选择框中未选择任何值,selected
属性似乎也不会出现在HTML中。
答案 0 :(得分:6)
是的,有可能。 我已创建此示例https://jsfiddle.net/Luvq9n4r/1/来帮助您。 要更改选定的值,只需设置模型。 如果它不是你所需要的,那么,请做一个小提琴。
谢谢。
new Vue({
el: '#app',
data: function() {
return {
selectedFlavor: 'lime',
flavors: ['blueberry', 'lime', 'strawberry']
}
},
methods: {
change: function() {
this.selectedFlavor = 'strawberry';
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<button @click="change()">Set Strawberry</button>
<select v-model="selectedFlavor">
<option v-for="flavor in flavors" :value="flavor">{{flavor}}</option>
</select>
</div>
答案 1 :(得分:0)
您在选择中使用v-model
和selectedFlavor
在正确的轨道上。将选择框的binds the value设置为selectedFlavor
的值。更改selectedFlavor
的值时,将更改select元素的值。这是双向的。即。如果更改选择框,则还将更改selectedFlavor
的值(即two-way data binding,reactivity)。
更改select元素的值也会更改哪个选项元素具有selected
属性。您可以使用此v模型数据绑定来实现您的目标,但这只是功能上等效的结果。您的用例可能有所不同。
如果您可以使用此方法更改选择框的值,则在selectedFlavor
对象中设置data
的初始值将达到您设置选择框默认值的目的,因此哪个选项元素具有选定的属性。
您可以通过直接或(最好)通过某种状态管理(如Vuex)来更改绑定到的数据模型的值来更改选择框的值。状态管理回答了有关基于来自其他事件,数据源,API,Web套接字等的动态数据来管理选择状态的更大问题。
我直接在下面修改selectedFlavor
的值只是为了突出基本概念,但我也试图暗示状态管理范式中的值。
<select v-model="selectedFlavor">
<option v-for="flavor in flavors"
:value="flavor"
@change="onChangeFlavour"
>{{ flavor }}</option>
</select>
new Vue({
el: '#app',
data() {
return {
selectedFlavor: 'lime', // Default value is set here
flavors: ['blueberry', 'lime', 'strawberry']
}
},
methods: {
onChangeFlavour(event) {
// do what you want with the new value when the select box is changed
console.log(event.srcElement.value);
// OR preferably
console.log(this.selectedFlavor); // because binding
},
setFlavour(newFlavour){
// change the value
this.selectedFlavor = newFlavour;
}
}
});
答案 2 :(得分:-3)
您可以将jquery与vue结合使用以在线选择选项。
1。包括jQuery
window.$ = require('jquery');
window.JQuery = require('jquery');
2。 HTML / PHP更新
在data-selected
中添加select tag
字段。
<select v-model="company" name="company" data-selected="{{ $document->company_id }}"> <option value="{{ $company->id }}">{{ $company->name }}</option> </select>
3。 Vue更新
const app = new Vue({
el: '#app',
data: {
company: '',
companies: '',
}
methods: {
getCompanies: function () {
axios.post('/company/getdata').then(function (response) {
app.companies = [];
app.companies = response.data;
// Check if .editCompany is present.
if ($('.editCompany').length > 0) {
app.company = $('.editCompany').data('selected');
}
}).catch(error => console.log(error));
},
},
created: function () {
this.getCompanies();
}
});