In Vue.js, how can I make sure a select element continuously has the first option selected as options are conditionally shown and hidden?

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>