javascript 如何在Vue中有条件地设置选定的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48408158/
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
How to conditionally set selected option in Vue
提问by rob
Is it possible to pre-set a select box's selected value?
是否可以预先设置选择框的选定值？
Using Vue (v2), I have tried to create a select box like this inside a Vue template.
使用 Vue (v2)，我尝试在 Vue 模板中创建一个像这样的选择框。
<select v-model="selectedFlavor">
<option v-for="flavor in flavors"
:value="flavor"
:selected="selectedFlavor == flavor">{{ flavor }}</option>
</select>
And a component like this:
和这样的组件：
Vue.component('flavor-pane', {
...
data: function() {
selectedFlavor: 'strawberry',
flavors: ['blueberry', 'lime', 'strawberry'],
});
}
Essentially, the idea is that I need to loop through a simple array, create several options in a select box, and set the select box's value to an existing value. Can I do this?
本质上，这个想法是我需要遍历一个简单的数组，在选择框中创建几个选项，并将选择框的值设置为现有值。我可以这样做吗？
My templates/components are rendering fine, but the selectedattribute doesn't seem to appear in the HTML even when the condition is met and there is no value selected in the select box.
我的模板/组件呈现良好，但selected即使满足条件并且在选择框中没有选择值，该属性似乎也没有出现在 HTML 中。
回答by lmarqs
Yes, it is possible. I've created this example https://jsfiddle.net/Luvq9n4r/1/to help you. To change the value selected just set the model. If it isn't what you need, please, make a fiddle too.
对的，这是可能的。我创建了这个例子https://jsfiddle.net/Luvq9n4r/1/来帮助你。要更改选定的值，只需设置模型。如果它不是你需要的，请也做一个小提琴。
Thank you.
谢谢你。
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>回答by Strixy
You were on the right track using v-modeland selectedFlavoron the select. Doing so binds the valueof the select box to the value of selectedFlavor. When you change the value of selectedFlavoryou change the value of the select element. This works both ways; ie. if you change the select box you'll also change the value of selectedFlavor(ie two-way data binding, reactivity).
你在正确的轨道上使用v-model和selectedFlavor选择。这样做会将选择框的值绑定到 的值selectedFlavor。当您更改 的值时，selectedFlavor您会更改选择元素的值。这是双向的；IE。如果您更改选择框，您也将更改selectedFlavor（即双向数据绑定，反应性）的值。
Changing the value of the select element also changes which option element has the selectedattribute. You can use this v-model data binding to achieve your goal, but this is only a functionally equivalent result. Your use case may differ.
更改 select 元素的值也会更改具有该selected属性的选项元素。您可以使用此 v-model 数据绑定来实现您的目标，但这只是功能等效的结果。您的用例可能有所不同。
If you can change the value of the select box using this method then setting the initial value of selectedFlavorin the dataobject will achieve your goal of setting a default value of the select box and therefore which option element has the selected attribute.
如果您可以使用此方法更改选择框的值，那么selectedFlavor在data对象中设置 的初始值将实现您设置选择框默认值的目标，因此哪个选项元素具有 selected 属性。
You can change the value of the select box by changing the value of the data model you bind to either directly or (preferably) through some sort of state management like Vuex. State management answers your larger question around managing the state of the select based on dynamic data from other events, data sources, API's, web sockets, etc...
您可以通过直接或（最好）通过某种状态管理（如Vuex）更改绑定到的数据模型的值来更改选择框的值。状态管理回答了关于基于来自其他事件、数据源、API、Web 套接字等的动态数据管理选择状态的更大问题......
I'm directly modifying the value of selectedFlavorbelow only to highlight the basic concept, but I also tried to hint at what this might look like within a state management paradigm.
我直接修改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;
}
}
});
回答by Eugine Joseph
You can use jquery with vue to select an option online.
您可以使用 jquery 和 vue 在线选择一个选项。
1. Include jquery
1.包含jquery
window.$ = require('jquery');
window.JQuery = require('jquery');
2. HTML/PHP update
Add the data-selectedfield in select tag.
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>
<select v-model="company" name="company" data-selected="{{ $document->company_id }}"> <option value="{{ $company->id }}">{{ $company->name }}</option> </select>
3. Vue Update
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();
}
});
