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

У меня проблема с инициализацией 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?

Источник

2 ответа

Решение

Ответ @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;
});
Источник

Чтобы воспользоваться 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 будет предварительно выбран в соответствии с данными. Вы также можете увидеть рабочий пример этого кода и коробки.

Источник
Другие вопросы по тегам