在Vue.js中，如何確保select元素連續選擇了第一個選項，因為有條件地顯示和隱藏了選項？

Question

我的Vue應用程序中有一個select元素，該元素具有根據用戶在應用程序中設置的其他選項有條件顯示或刪除的選項，例如：

<select id='animal' v-model='values.animal.selected'>
    <option value='cat' v-if='legs == 4'>Cat</option>
    <option value='dog' v-if='legs == 4'>Dog</option>
    <option value='bird' v-if='legs == 2 && wings == 2'>Bird</option>
    <option value='snake' v-if='!legs'>Snake</option>
</select>

通過此設置，當用戶更改legs數量時，選項會適當地顯示和消失。 但是，當選定的選項應更改為可用選項之一時，通常仍將是隱藏的選項之一。 選項更改時，尤其是第一個選項更改時，是否可以更改選擇元素的所選值？

Answer 1

您需要檢查過濾器值何時更改，然后通過與過濾器條件匹配的第一個值來更新所選值。

試試這個代碼

<template>
  <div id="app">
    <p>
      filter options
    </p>
    <input type="number" v-model="amountLegs"/>
    <br>
    <select id="animal" v-model="selectedAnimal">
      <option
        v-for="(animal, index) in filteredArray"
        :key="index"
        :value="animal.val"
      >
        {{ animal.label }}
      </option>
    </select>
    <br>
    <p>selected value: {{ selectedAnimal }}</p>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      amountLegs: 0,
      selectedAnimal: 'snake',
      animals: [
        {
          val: 'cat',
          label: 'Cat',
          legs: 4
        },
        {
          val: 'dog',
          label: 'Dog',
          legs: 4
        },
        {
          val: 'bird',
          label: 'Bird',
          legs: 2
        },
        {
          val: 'snake',
          label: 'Snake',
          legs: 0,
        },
      ],
    };
  },
  computed: {
    filteredArray() {
      return this.animals.filter(x => x.legs === this.amountLegs);
    },
  },
  methods: {
    onChangeAmountLegs() {
      const selectedAnimal = this.animals.find(x => x.val === this.selectedAnimal);
      const legs = this.amountLegs;
      if (selectedAnimal) {
        if (selectedAnimal.legs !== legs) {
          const animal = this.animals.find(x => x.legs === legs);
          this.selectedAnimal = animal ? animal.val : null;
        }
      } else {
        const animal = this.animals.find(x => x.legs === legs);
        this.selectedAnimal = animal ? animal.val : null;
      }
    },
  },
  watch: {
    amountLegs(val) {
      if (val) {
        this.amountLegs = typeof val === 'string' ? parseInt(val) : val;
        this.onChangeAmountLegs();
      }
    }
  }
};
</script>

Answer 2

不好意思，我的英語不好，但是我會盡力回答你的問題。 1，v-if指令將銷毀並渲染元素，如果條件為True，也許您應該檢查條件變化。 2，我想你想在銷毀選項時，將選擇值綁定到渲染選項值，是嗎？ 關於這一點，您應該學習HTML。 在此處輸入鏈接說明

並使用Vue監視程序的條件，當條件更改時，在渲染選項值中對比選擇值，如果為False，則將選擇值更改為第一個選項值。 3，在數據中設定值，使用清單不會復雜。

這是我的代碼：

 const app = new Vue({ el: '#app', data: { legs: 4, wings: 2, selected: 'cat', optionValueList:['cat','dog','bird','snake'] }, watch:{ legs(newVal){ if(newVal==4){ this.selected = this.optionValueList[0] }else if(newVal==2 && this.wings==2){ this.selected = this.optionValueList[2] } else if(newVal==0){ this.selected = this.optionValueList[3] } } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <select id='animal' v-model='selected'> <option :value='optionValueList[0]' v-if='legs == 4' >Cat</option> <option :value='optionValueList[1]' v-if='legs == 4' >Dog</option> <option :value='optionValueList[2]' v-if='legs == 2 && wings == 2'>Bird</option> <option :value='optionValueList[3]' v-if='legs==0'>Snake</option> </select> {{selected}} <input type="number" v-model="legs"></input> </div>