在Vue.js中，如何确保select元素连续选择了第一个选项，因为有条件地显示和隐藏了选项？

Question

I have a select element in my Vue app that has options that are conditionally displayed or removed based on what other options the user has set in the app, like so:

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

With this set up, the options appear and disappear appropriately as the user changes the amount of legs . However, the selected option will often remain one of the hidden options, when it should change to one of the available options. Is it possible to change the selected value of a select element when the options change, particularly to the first option?

Answer 1

you need to check when the filter value changes and then update the selected value by the first value that matches with the filter condition.

try this code

<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

Excuse me, my English is bad, but I'll try to answer your question. 1、v-if directive will destroy and render element, if condition is True, maybe you should check condition change. 2、I guess you want when option was destroy, the select value to bind the render option value, is it? About this,you should to learn HTML . enter link description here

And use Vue watchers the condition,when condition change, contrast the select value in render options value, if False, change select value to the first option value. 3、value set in data, and use list will not complicated.

This is my code：

 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>