在 v-for vue js 中自动选择第一个选项
Posted
技术标签:
【中文标题】在 v-for vue js 中自动选择第一个选项【英文标题】：auto select first option in v-for vue js 【发布时间】：2020-04-28 00:24:24 【问题描述】：我正在循环一个数组以生成如下下拉列表
<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>
我正在尝试将下拉菜单的值默认为其第一个值。
值正在显示，但第一个选项没有被选中。
我的代码有什么错误。请帮忙！！
【问题讨论】：
你能给你的 v-model 添加一个默认值吗？ 【参考方案1】：您可以将data() 中的compare_version 的默认值定义为0，因为您将迭代列表中的索引绑定为模型中要捕获的值。 v-model 会解决这个问题。
并删除 :selected 绑定。请注意，此处从 select 中捕获的值将是列表的索引。
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 中自动选择第一个选项的主要内容，如果未能解决你的问题，请参考以下文章