Vue V-модель инициации потерь выбирает выбор

Question

У меня проблема с инициализацией Vue для некоторых типов HTML-элементов, взгляните на следующий код:

new Vue({
  el: '#app',
  data: {
    test: ''
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Without Vue:
  <!-- Non-Vue select defaults to selected value -->
  <select>
    <option>1</option>
    <option selected>2</option>
    <option>3</option>
  </select>

  <br /> 
  <br /> 
  
  With Vue:
  <!-- Vue enabled list loses selection -->
  <select v-model="test">
    <option>1</option>
    <option selected>2</option>
    <option>3</option>
  </select>
</div>

Когда я запускаю Vue, кажется, что любой "выбор", который вы объявляете v-Modal при потере их выбранного значения.Это как описано в документации :

v-модель будет игнорировать начальное значение, проверенные или выбранные атрибуты, найденные в любых элементах формы.Он всегда будет обрабатывать данные экземпляра Vue как источник правды.Вы должны объявить начальное значение на стороне JavaScript, внутри опции data вашего компонента.

Теперь я могу сделать это, но для каждого выбора мне нужно написать немного JS вне Vueдля заполнения / повторного заполнения значения по умолчанию для выбора (путем заполнения свойства «data» или повторного выбора ранее выбранного значения после замедления Vue).

Есть ли более простой способ сделать это?Может быть, какой-то параметр или тег, который я могу передать Vue, чтобы «сохранить» значения, унаследованные от начального состояния элемента управления HTML?

Answer 1

@ b0nyb0y ответ технически корректен, но, поскольку он не решает мою конкретную проблему, я бы подумал, что я включу свой хакерский обходной путь здесь для дальнейшего использования (работает только для избранных):

var itemsToRestore = [];
$('select[v-model]').each(function (index, value) {
    itemsToRestore.push({
        vModelProperty: $(value).attr("v-model"),
        selectedValue: $(value).val()
    });
});

var thisVue = new Vue({
    //Put your vue code here
});

itemsToRestore.forEach(function (value) {
    thisVue[value.vModelProperty] = value.selectedValue;
});

Answer 2

Чтобы воспользоваться системой реактивности vue, vue нуждается в полном контроле.Таким образом, нет никакого способа обойти это, вы должны как-то сообщить vue об этих значениях по умолчанию.

Если вы html-центричный, то это будет немного неловко: вы должны выбрать domэлемент, чтобы найти его значение по умолчанию и установить его обратно в vue.Это бы сработало, но это было бы однотипно.

Правильный путь в vue состоит в том, чтобы полностью ориентироваться на данные и создавать HTML на основе данных.Например, если ваша форма имеет 2 поля выбора, то, используя способ vue, вы должны определить данные для всех имеющихся у вас option и использовать такие данные для создания этих элементов с нуля (обратите внимание, что яиспользуя формат Single File Component здесь):

<template>
  <div>
    <Select :items="list1"/>
    <Select :items="list2"/>
  </div>
</template>

<script>
import Select from './components/Select.vue';

export default {
  data() {
    return {
      list1: [
        { id: 1, name: "spoon" },
        { id: 2, name: "fork", preselect: true },
        { id: 3, name: "knife" }
      ],
      list2: [
        { id: 4, name: "macbook" },
        { id: 5, name: "dell" },
        { id: 6, name: "lenovo", preselect: true }
      ]
    };
  },
  components: { Select }
};
</script>

И вот код для компонента <Select> (обратите внимание, что это пользовательский компонент Vue, так как он начинается с заглавной буквы S),Этот компонент получит опору items и автоматически вычислит выбранное значение из заданных предметов:

<template>
  <select v-model="selected">
    <option 
      v-for="item of items"
      :key="item.id"
      :value="item.id">
        {{ item.name }}
    </option>
  </select>
</template>

<script>
export default {
  props: ["items"],
  data() {
    return {
      // pre-select item from 'items'
      selected: this.items.filter(item => item.preselect)[0].id
    };
  }
};
</script>

После этого элемент fork и элемент lenovo будут предварительно выбраныкак диктуют данные.Вы также можете увидеть рабочий пример этого codesandbox .