Блог

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

 <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, но не :выбрано.
Есть ли какой-либо способ присвоить выбранному значению значение первого элемента в массиве?

Вы должны контролировать это, устанавливая 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>