如何在同一个 select v-model 中使用两种方法？答案

【问题标题】：How can i use two methods in the same select v-model?如何在同一个 select v-model 中使用两种方法？
【发布时间】：2019-04-19 11:23:37
【问题描述】：

我有两个选择。我可以选择一种方法吗？

这是我的选择：

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

但是对于这个选择，我只能对每个选择使用sortAZ 方法。

所以，我有两个方法：sortAZ 和sortZA，我想对第一个选项使用一个方法，对第二个选项使用一个方法。

【问题讨论】：

标签： javascript vue.js

【解决方案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 指令绑定选定的选项值。然后检查change方法中选择了哪个值。

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>

【讨论】：