自动选择 v-for vue js 中的第一个选项 [英] auto select first option in v-for vue js
问题描述
我正在循环一个数组以生成如下下拉列表
我正在尝试将下拉列表的值默认为其第一个值.
值正在显示，但第一个选项没有被选中.
我的代码有什么错误.请帮忙！！
您可以将 data() 中的 compare_version 的默认值定义为 0，因为您正在绑定迭代列表中的索引作为要在模型中捕获的值.v-model 会处理这个.
并删除 :selected 绑定.请注意，这里从 select 中捕获的值将是列表的索引.
var vm = new Vue({el: "#vue-instance",数据: {比较版本:0，所有版本:[{versionId: 'A'},{versionId: 'B'},{versionId:'C'}]}})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><!DOCTYPE html><身体><div id="vue-instance"><select v-model="compare_version"><option v-for="(x,index) in allVersions"v-bind:value="索引"v-bind:key="x.text">{{x.versionId}}</option></选择><span>已选择:{{ compare_version }}</span></html>
I am looping an array to generate dropdown as below
<select class="form-control" v-model="compare_version" >
<option
v-for="(version, index) in allVersions"
v-bind:value="index"
v-bind:key="version.versionid"
:selected="version.versionid === 0"
>{{ version.versionid }}</option>
</select>
I am trying to default the value of the dropdown to its first value.
The values are getting displayed but the first option is not getting selected .
What is the mistake in my code. Please help!!
You can define the default value as 0 for compare_version in data() since you are binding the index from the iterating list as the value to be captured in the model. v-model will take care of that.
And remove that :selected binding. Taking a note that here captured value from select will be the index of the list.
var vm = new Vue({
el: "#vue-instance",
data: {
compare_version: 0,
allVersions: [
{versionId: 'A'},
{versionId: 'B'},
{versionId: 'C'}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="vue-instance">
<select v-model="compare_version">
<option v-for="(x,index) in allVersions"
v-bind:value="index"
v-bind:key="x.text">{{x.versionId}}</option>
</select>
<span>Selected: {{ compare_version }}</span>
</div>
</body>
</html>
这篇关于自动选择 v-for vue js 中的第一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
