В Vue.js, как я могу убедиться, что для элемента select постоянно выбран первый параметр, поскольку параметры условно отображаются и скрываются?

Question

У меня есть элемент select в моем приложении Vue, в котором есть параметры, которые условно отображаются или удаляются в зависимости от того, какие другие параметры пользователь установил в приложении, например:

<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.Однако выбранный параметр часто остается одним из скрытых параметров, когда он должен измениться на один из доступных параметров.Можно ли изменить выбранное значение элемента select при изменении параметров, в частности, первого параметра?

Answer 1

Извините, мой английский плохой, но я постараюсь ответить на ваш вопрос.1 、 Директива v-if уничтожит и отобразит элемент, если условие истинно, возможно, вам следует проверить изменение условия.2. Я полагаю, вы хотите, чтобы параметр уничтожал значение select, чтобы связать значение параметра render, верно?Об этом вам стоит изучить HTML. введите описание ссылки здесь

И используйте Vue, наблюдая за условием, при изменении условия сопоставьте значение select в значении параметров рендеринга, если False, измените значение select на первое значение параметра.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>

Answer 2

вам нужно проверить, когда значение фильтра изменяется, а затем обновить выбранное значение первым значением, которое соответствует условию фильтра.

попробуйте этот код

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