как изменить параметры выбора на основе другого параметра выбора, выбранного vue js

Question

Я хочу использовать это, и мне было трудно сделать это в Vue Version. Я прочитал документальный фильм о Vue на Vuejs.org, но он не помогает мне перенести этот скрипт в версию vue

Структура HTML

<select id="type">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

JS

$(document).ready(function() {

    $("#type").change(function() {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");

        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");

        }
    });


});

Answer 1

Вот пример того, как это сделать: https://codepen.io/antoniandre/pen/OJJQMGN?editors=1010

JS

new Vue({
  el: '#app',
  data: () => ({
    selection1: null,
    optionsList: ''
  }),

  methods: {
    changeSelect2 () {
      switch (this.selection1) {
          case 'item1':
            this.optionsList = '<option value="test">item1: test 1</option><option value="test2">item1: test 2</option>'
            break;
          case 'item2':
            this.optionsList = '<option value="test">item2: test 1</option><option value="test2">item2: test 2</option>'
            break;
          case 'item3':
            this.optionsList = '<option value="test">item3: test 1</option><option value="test2">item3: test 2</option>'
            break;
      }
    }
  }
})

HTML

<div id="app">
  <select @change="changeSelect2" v-model="selection1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
  </select>

  <select v-html="optionsList"></select>
</div>

Но это, конечно, не самый чистый способ сделать это, я просто преобразовал ваш пример как есть. Чтобы сделать его лучше, параметры должны быть в списке, вероятно.

---

Вот небольшой учебник, чтобы начать и понять:

1. включает библиотеку Vue
2. Никогда не манипулируйте DOM (если нет выбора), Vue is DATA DRIVEN
3. прослушивание событий DOM на элементах DOM с помощью @eventName
4. поместите ваши функции вmethods, и ваши переменные в data это всегда так
5. атрибут v-model является двухсторонним связыванием и запускает автоматическое изменение переменной при изменении выбранного параметра списка выбора, это называется«реактивность».
6. поместите ваши переменные в html в v-html для HTML или усов {{ }}, если вы хотите сохранить только его текстовое значение, а не HTML.
7. следуйте нескольким учебникам