vue.js 如何根据v-select设置的条件触发change或click事件?

z3yyvxxp  于 2023-03-13  发布在  Vue.js
关注(0)|答案(1)|浏览(301)

我有一个可以在用户类型之间进行选择的v-select字段。当选择用户类型时,v-model将更改为该类型。我希望创建一个方法,当选择特定用户类型时触发一条消息,但如果v-model设置为该类型的用户,我不希望每次用户打开页面时都弹出该消息。

<w-v-select
        v-model="user.type"
        :options="userTypeOptions"
        @change="displayMessage()"
        :reduce="option => option.type"
        :clearable="false"
      />

data() {
  return {
      user: {
        type: 'DEFAULT'
    }
  };
}

  userTypeOptions() {
    return userTypes
      .map(userType => ({type: userType, label: this.$t(`model.user.types.${userType}`)}))
      .sort((a, b) => a.label.localeCompare(b.label));
  },

然后我需要一个方法,比如:

displayMessage(){
    if ( ** user clicks on type that equals "ADMIN" **) {
      console.log('You have clicked on ADMIN')
    }
  }
gjmwrych

gjmwrych1#

很简单

methods: {
  displayMessage(){
    if (this.user.type == "ADMIN" ) {
      console.log('You have clicked on ADMIN')
    }
}

更新

由于您是在@change事件中调用函数的,因此不会每次都调用它。请检查下面的练习场。
实现相同结果的另一种方法是使用watcher
x一个一个一个一个x一个一个二个一个x一个一个三个一个

相关问题