Блог

Главная - Вопросы по программированию - Как я могу использовать два метода в одной и той же select v-модели?

Как я могу использовать два метода в одной и той же select v-модели?

#javascript #vue.js

#javascript #vue.js

Вопрос:

У меня есть выбор с двумя вариантами. Могу ли я использовать один метод для выбора?

Это мой выбор:

 <select :value="selected" @change="sortAZ">
   <option disabled value="">Ordina per</option>
   <option>A-Z</option>
   <option>Z-A</option>
</select>

Но с этим выбором я могу использовать только sortAZ метод для каждого выбора.

Итак, у меня есть два метода: sortAZ и sortZA я хотел бы использовать метод для первого варианта и метод для второго.

Ответ №1:

Вы можете просто сохранить текущее выбранное значение и решить, какой метод вызывать в обработчике onchange.

 <select :v-model="selected" @change="sort" ">
   <option disabled value="">Ordina per</option>
   <option>A-Z </option>
   <option>Z-A</option>
</select>

methods:{
  sort(){
    if(selected == 'A-Z'){
      callSortAZ();
    }
    else if(selected == 'Z-A'){
      callSortZA();
    }
  }
}

Надеюсь, это поможет.

Ответ №2:

Используя v-model , вы можете обновить значение локальной переменной selected , затем прочитать значение selected изнутри метода и выполнить сортировку AtoZ или ZtoA.

 <template>
  <select v-model="selected" @change="handleSort" ">
    <option disabled value="">Ordina per</option>
    <option value="az">A-Z </option>
    <option value="za">Z-A</option>
  </select>

</template>

<script>
new Vue({
  el: '...',
  data: {
    selected: ''
  },
  methods: {
    handleSort() {
      const selectedVal = this.selected;

      if (selectedVal === 'az') {
        // sort a to z, call other method
        ...
      } else if (selectedVal === 'za') {
         // sort z to a, call other method
         ... 
      } else {
         ...
      }
    }
  }
})
</script>

Ответ №3:

Используйте v-model директиву для привязки выбранного значения параметра. Затем проверьте, какое значение выбрано в методе изменения.

 new Vue({
  el: '#app',
  data: {selected:''},
  methods: {
    sorter: function() {
        if (this.selected === 'A-Z') {
          // the logic for A-Z sorting... 
          console.log('A-Z option selected')
        } else if (this.selected === 'Z-A') {
          // the logic for Z-A sorting... 
          console.log('Z-A option selected')
        }   
    }
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <select v-model="selected" @change="sorter" >
     <option disabled value="">Ordina per</option>
     <option value='A-Z'>A-Z</option>
     <option value='Z-A'>Z-A</option>
  </select>
</div>
Метки: