Автовыбор первой опции в v-for vue js - PullRequest
Новая
       9

Автовыбор первой опции в v-for vue js

3 голосов
/ 10 января 2020

Я зацикливаю массив для создания раскрывающегося списка, как показано ниже 

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

Я пытаюсь установить по умолчанию значение раскрывающегося списка в его первое значение.

Значения отображаются, но Первый вариант не выбран.

В чем ошибка в моем коде. Пожалуйста, помогите !!

1 Ответ

1 голос
/ 10 января 2020

Вы можете определить значение по умолчанию как 0 для compare_version в data(), так как вы привязываете индекс из списка итераций как значение, которое будет записано в модели. v-model позаботится об этом.

И удалите эту :selected привязку. Принимая во внимание, что здесь полученное значение от выбора будет индексом списка. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...