如何根據 vue js 選擇的另一個 select 選項更改選擇選項

Question

我想使用它，但我在 Vue 版本中遇到了麻煩。 我已經在 Vuejs.org 中閱讀了 Vue 的紀錄片，但它並沒有幫助我將此腳本遷移到 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 是數據驅動的
3. 使用@eventName監聽 DOM 元素上的 DOM 事件
4. 將您的函數放在methods中，並將您的變量放在data中，這總是這樣
5. v-model屬性是 2 路綁定，當 select 列表選擇選項發生變化時，觸發變量自動更改，這稱為“反應性”。
6. 如果您只想保留其文本值而不是 HTML，請將您的變量放在v-html中的 html 中以獲取 HTML 或胡須{{ }} 。
7. 遵循一些教程

Answer 2

我需要這個問題的答案，我找到了這個話題。 所以，我試過了，是的，它奏效了。 之后，我想嘗試改進 3 個相互鏈接的獨立 select 框的答案。 這是我的回答：

<script src="vue.js"></script>

<form method="get">
<div id="app">
  <select @change="select1change" v-model="list1" name="select1">
      <option value="fruits">fruits</option>
      <option value="vegetables">vegetables</option>
      <option value="flowers">flowers</option>
  </select>

  <select @change="select2change" v-model="list2" v-html="select2options" name="select2"></select>

  <select v-html="select3options" name="list3"></select>
</div>
<input type="submit">
<form>

<script>
new Vue({
  el: '#app',
  data: () => ({
    list1: null,
    list2: null,
    select2options: '',
    select3options: ''
  }),

  methods: {
    select1change() {
      switch (this.list1) {
          case 'fruits':
            this.select2options = '<option value="apple">apple</option><option value="banana">banana</option>'
            break;
          case 'vegetables':
            this.select2options = '<option value="spinach">spinach</option><option value="broccoli">broccoli</option>'
            break;
          case 'flowers':
            this.select2options = '<option value="rose">rose</option><option value="daisy">daisy</option>'
            break;
      }
    },
    select2change() {
      switch (this.list2) {
          case 'apple':
            this.select3options = '<option value="red apple">red apple</option><option value="green apple">green apple</option>'
            break;
          case 'banana':
            this.select3options = '<option value="yellow">yellow</option><option value="green">green</option>'
            break;
          case 'spinach':
            this.select3options = '<option value="big leaf">big leaf</option><option value="tiny leaf">tiny leaf</option>'
            break;
          case 'broccoli':
            this.select3options = '<option value="whole broccoli">whole broccoli</option><option value="half broccoli">half broccoli</option>'
            break;
          case 'rose':
            this.select3options = '<option value="pink rose">pink rose</option><option value="red rose">red rose</option>'
            break;
          case 'daisy':
            this.select3options = '<option value="white daisy">white daisy</option><option value="yellow daisy">yellow daisy</option>'
            break;
      }
    }
  }
})
</script>