我可以让它只在某个变量为真时才执行点击事件吗？

Question

我想让它使用户只能触发点击事件，然后仅当某个变量为真时才执行函数。 例如：

<button @click='hello'>Trigger</button>

data: function() {
    return {
        isAuth: true
    }
},
methods: {
    hello(){
         console.log('hello')
    }
}

我只想指出，我不想只隐藏按钮。 我想点击按钮元素不会触发，除非 isAuth: true。

Answer 1

我想你可以按照以下方式进行，如果你真的想要：

<button @click='isAuth ? hello : {}'>Trigger</button>

但老实说，对我来说，这不是正确的方法。 我认为您应该考虑在单击按钮时调用该函数，并且在该函数内部，您可以使用 if 语句：

<button @click='hello'>Trigger</button>

data: function() {
    return {
        isAuth: true
    }
},
methods: {
    hello(){
      if (!this.isAuth) return;
      console.log('hello')
    }
}

Answer 2

<button @click='hello'>Trigger</button>
data: function() {
return {
  isAuth: true
 }
},
methods: {
 hello() {
  if (this.isAuth) {
    console.log('hello')
  }
 }
}