如何根据另一个选择值有条件地加载选择选项答案

【问题标题】：How to conditionally load select options based on another select value如何根据另一个选择值有条件地加载选择选项
【发布时间】：2020-04-06 10:37:19
【问题描述】：

<select v-model="dessert">
  <option>Ice Cream</option>
  <option>Cake</option>
  <option>Pie</option>
</select>

<select v-model="flavor">
  // options should depend on selected dessert
</select>

目标是选择第一个选项，然后显示第二个选择框，其中包含基于所选第一个选项的选项。

【问题讨论】：

您将使用适当的风味数组更新一些数据并使用 v-for 创建选项
只使用相同的型号：p

标签： javascript vue.js vuejs2 frontend vue-component

【解决方案1】：

我希望这会有所帮助！

   <select v-model="dessert" @change="dessertChanged">
       <option>Ice Cream</option>
       <option>Cake</option>
       <option>Pie</option>
    </select>

<select v-model="flavor">
  <option v-for="flavor in flavors" :key="flavor.value" :value="flavor.value"> 
    {{flavor.value}}</option>
</select>

<script>
    data:{
        flavours:[],
        dessert:''
    },
    methods:{
           dessertChanged:function(){
              if(this.dessert == 'ice cream'){
                 this.flavours = [{ value:'Vanilla'},{value:'butter scotch'}];
              }
              else if(this.dessert == 'cake'){
                 this.flavours = [{ value:'fruit cake'},{value:'chocolate'}];
              }
              else if(this.dessert == 'Pie'){
                 this.flavours = [{ value:'so' cake'},{value:'on'}];
              }
           }

    }
</script>

【讨论】：

【解决方案2】：

您可以使用v-if/v-else-if 根据dessert 有条件地呈现您的风味options：

<select v-if="dessert" v-model="flavor">
  <option value="null" selected>Choose flavor</option>
  <template v-if="dessert === 'Ice Cream'">
    <option>Vanilla</option>
    <option>Chocolate</option>
    <option>Strawberry</option>
  </template>
  <template v-else-if="dessert === 'Cake'">
    <option>Angel Food</option>
    <option>Pound</option>
    <option>Carrot</option>
  </template>
  <template v-else-if="dessert === 'Pie'">
    <option>Apple</option>
    <option>Cherry</option>
    <option>Peach</option>
  </template>
</select>

new Vue({
  el: '#app',
  data() {
    return {
      dessert: null,
      flavor: null,
    }
  }
})

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

<div id="app">
  <select v-model="dessert">
    <option value="null" selected>Choose dessert</option>
    <option>Ice Cream</option>
    <option>Cake</option>
    <option>Pie</option>
  </select>
  
  <select v-if="dessert" v-model="flavor">
    <option value="null" selected>Choose flavor</option>
    <template v-if="dessert === 'Ice Cream'">
      <option>Vanilla</option>
      <option>Chocolate</option>
      <option>Strawberry</option>
    </template>
    <template v-else-if="dessert === 'Cake'">
      <option>Vanilla</option>
      <option>Chocolate</option>
      <option>Carrot</option>
    </template>
    <template v-else-if="dessert === 'Pie'">
      <option>Apple</option>
      <option>Cherry</option>
      <option>Peach</option>
    </template>
  </select>
</div>

【讨论】：