自动选择 v-for vue js 中的第一个选项

Question

自动选择 v-for vue js 中的第一个选项

我正在循环一个数组以生成如下下拉列表

 <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>

Run Code Online (Sandbox Code Playgroud)

我试图将下拉列表的值默认为其第一个值。

值正在显示，但第一个选项没有被选中。

我的代码中有什么错误。请帮忙！！

Answer 1

amb*_*ing 2

compare_version您可以将in 的默认值定义为 0，data()因为您将迭代列表中的索引绑定为要在模型中捕获的值。v-model会处理的。

并删除该:selected绑定。请注意，此处从 select 捕获的值将是列表的索引。

var vm = new Vue({
  el: "#vue-instance",
  data: {
    compare_version: 0,
    allVersions: [
      {versionId: 'A'},
      {versionId: 'B'},
      {versionId: 'C'}
    ]
  }
})

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，10 月前
查看次数：	1517 次
最近记录：	5 年，10 月前