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