Как динамически добавить v-модель и ее начальные значения к существующим html-элементам с помощью vuejs

Question

В целях SEO мне нужно рендерить элементы HTML по php.Например, у меня есть эти элементы.

<?php foreach ($elements as $key => $element): ?>
    <select name="first" v-model="model[<?= $key; ?>]">
        <option value="">Select</option>
        <option value="1">Some Text</option>
        <option value="2">Some Text</option>
    </select>
    <select name="second" v-model="model[<?= $key; ?>]>
        <option value="">Select</option>
        <option value="4">Some Text</option>
        <option value="5">Some Text</option>
    </select>
    ...
    ...
    ...
    <select name="eleven" v-model="model[<?= $key; ?>]>
        <option value="">Select</option>
        <option value="101">Some Text</option>
        <option value="102">Some Text</option>
    </select>
<?php endforeach; ?>

И, вероятно, я могу манипулировать этими элементами, как это на стороне vue.

const count_models = <?= count($elements) ?>; // in the html
const app = new Vue({
  el: '#app',
  data: {
    model:[]
  },
  mounted(){
    console.log(this.model);
    for (let $i = 0; $i < count_models; $i++) {
        this.model[$i] = "";
    }
  }
})

Я не могу объявить начальные значения для модели [?].Мне нужно xhr или назначить подсчитанные элементы переменной javascript, чтобы узнать, сколько элементов select у меня есть в DOM, и объявить начальные значения как нулевые для каждой модели [].Даже если я переименую начальные значения моделей, это не связывает.Я просто положил пример на jsFiddle.В Angular1 был атрибут ng-init, чтобы объявить начальное значение для модели.

Как я могу решить эту проблему?

https://jsfiddle.net/ks7jmgwv/1/

Answer 1

Вы только что столкнулись с одним из самых распространенных ошибок Вуэйса: реактивность (и, следовательно, недостаток)!

Проблема здесь в том, что при создании свойства модели это просто пустой массив / объект, и любое свойство, которое вы добавляете к этому элементу, не будет реактивным: это означает, что любые изменения, сделанные программно, не вызовут Vue. из-за внутренних проблем единственная причина, по которой v-модель все еще работает, заключается в том, что изменения, сделанные пользователем, а не кодом, фактически вызывают собственные события HTML.

У вас есть два возможных решения:

• Игнорировать реактивную часть (но вы не сможете программно обновить выбранное значение или, по крайней мере, оно не будет видно) и просто убедитесь, что опция «Выбрать» будет выбрана по умолчанию присвоив ему правильное значение (таким образом, вы можете просто пропустить все инициализации цикла по умолчанию).

  <option :value="undefined" selected="selected" disabled>Select</option>

• Следуйте официальному способу, предложенному в документации Vuejs, чтобы добавить новое свойство к объекту, сохраняя при этом преимущество реактивности

  this.$set(this.model, $i, "");

Вы можете проверить этот поршень, в котором я показываю вам оба способа достижения вашей цели: https://jsfiddle.net/8y7eu39z/18/

Кроме того, знаете ли вы, что для опций местозаполнителя в выборе можно добавить атрибут отключен?

Реактивность Ссылка: https://vuejs.org/v2/guide/reactivity.html

---

Также: если вы хотите, чтобы значение «null» было значением по умолчанию, но вам не удалось найти способ сделать его распознаваемым с помощью опций «select», просто используйте :value="null" вместо value="null", и тогда вам следует в состоянии использовать this.$set(this.model, $i, null);