Vue JS 将填充选择中的第一项设置为使用 v-model 选择

Question

我对 vuejs 有一个棘手的挑战，我想要两个选择字段。例如，第一个应该选择水果，第二个应该列出所有水果。如果我从第一个选择字段中选择蔬菜，第二个选择字段应该列出所有蔬菜。

我在网上偶然发现了类似的东西，但我不知道如何选择第二个选择字段中的第一个项目。

每当我选择水果时，第二个选择第一个列表中的第一项应该被默认选择，如果我选择蔬菜，第二个选择字段中的第一项应该被默认选择。

请帮我检查这里的代码：https://jsfiddle.net/aj6g87dh/1/

new Vue({
  el: '#test',
  data: {
    category: 'fruits',
    list: '',
    optionsData: {
       fruits: [
            { text: 'Orange', value: 'orange' },
            { text: 'Banane', value: 'banana' },
       ],
       
       vegetables: [
           { text: 'Brocolis', value: 'brocolis' },
           { text: 'Radish', value: 'radish' },
       ]
    }
  },

  computed: {
    options: function() {
      let options = ''

      switch (this.category) {
        case 'fruits':
          options = this.optionsData.fruits
          break;

        case 'vegetables':
          options = this.optionsData.vegetables
          break;

        default:
          options = this.optionsData.fruits
      }

      return options
    }
  },

  methods: {
    onChange: function() {
      this.options = this.options
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<div id="test">
  <select v-model="category" v-on:change="onChange" id="select1">
    <option value="fruits">Fruits</option>
    <option value="vegetables">Vegetables</option>

  </select>

  <select id="select2" v-model="list">
    <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option>
  </select>

  <span>{{  }}</span>

</div>

Answer 1

您可以删除 onChange 方法并添加一个 watch 属性。这样您就可以在那里处理不断变化的逻辑。

此外，您可以将选项检索简化为一行。

new Vue({
  el: '#test',
  data: {
    category: 'fruits',
    list: '',
    optionsData: {
      fruits: [{
          text: 'Orange',
          value: 'orange'
        },
        {
          text: 'Banane',
          value: 'banana'
        },
      ],

      vegetables: [{
          text: 'Brocolis',
          value: 'brocolis'
        },
        {
          text: 'Radish',
          value: 'radish'
        },
      ]
    }
  },

  computed: {
    options: function() {
      return this.optionsData[this.category]
    }
  },
  watch: {
    category: {
      handler: function(newVal) {
        this.list = this.optionsData[newVal][0].value;
      },
      immediate: true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">

  <select v-model="category" id="select1">
    <option value="fruits">Fruits</option>
    <option value="vegetables">Vegetables</option>

  </select>

  <select id="select2" v-model="list">
    <option v-for="(option, i) in options" v-bind:value="option.value"> {{ option.text }} </option>
  </select>

  <span>{{ }}</span>

</div>