Vue.js выбранное значение на входе не совпадает: выбранный параметр

Question

Vue.js выбирает после загрузки страницы значение, которое соответствует v-модели, но игнорирует: выбранный атрибут.Код:

<select class="form-control " :required="true"
    :class="{'is-invalid': errors.has('item_'+index) }"
    :name="'item_'+index"
    v-validate="'required'"
    v-model="item.text_value"
    v-if="item.type =='TYPE_TEXT' ">
        <option
        v-for="(itemz, index) in (getwords(item.product_parameter_value.text))"
        :value="itemz"
        v-bind:selected="index === 0"
        >{{ itemz }}</option>
    </select>

Элемент item.text_value представляет собой одно слово (Option2 и т. Д.). Getwords (item.product_parameter_value.text) возвращает массив - ['Option1'], ['Option2'], ['Option3']и т.д. Таким образом, выбранное значение всегда соответствует item.text_value, но не: selected.Есть ли способ установить выбранное значение для первого элемента в массиве?

Answer 1

Вы должны контролировать это, устанавливая v-model в правильное значение, вместо того, чтобы пытаться заставить DOM не синхронизироваться с моделью данных.

В идеале это можно сделать, просто установивitem.text_value в блоке данных компонента;если правильное значение не может быть известно заранее, вы можете прочитать вашу функцию getwords до того, как компонент подключится, чтобы найти первый элемент:

new Vue({
  el: '#app',
  data: {
    item: {
      text_value: "" // ideally you would init the correct value here
    }
  },
  methods: {
    getwords() { // simplified stub for your data source:
      return ["Option1", "Option2", "Option3"]
    }
  },

  beforeMount() {
    // if you can't init it in the data block,
    // read the value from getwords() here instead:
    this.item.text_value = this.getwords()[0]
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <select v-model="item.text_value">
    <option v-for="itemz, index) in (getwords())" :value="itemz">{{itemz}}</option>
  </select>
</div>