如何在同一个选择v模型中使用两种方法？

Question

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

这是我的选择：

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

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

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

Answer 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();
    }
  }
}

希望对您有帮助。

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

Answer 3

使用function login() { gapi.auth2.init({ client_id: myClientIdHere, cookie_policy: 'none', fetch_basic_profile: false, // <-- remove basic profile scope: 'openid', // <-- request only openid ux_mode: 'redirect', // <-- using redirect to avoid popup blocker issues redirect_uri: myRedirectUriHere, }).then((GoogleAuth) => { GoogleAuth.signIn() // [etc] }); } function init() { gapi.load('auth2', login); } 指令绑定选定的选项值。然后检查更改方法中选择了哪个值。

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')
        }   
    }
  }
});