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

Question

<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>

目标是选择第一个选项，然后出现一个辅助选择框，其中包含基于所选第一个选项的选项。

Answer 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>