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

by

2👍

✅

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>
👤Jose Noriega

1👍

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

Leave a comment