Могу ли я сделать так, чтобы событие щелчка выполнялось, только если определенная переменная истинна?

Question

Я хочу сделать так, чтобы пользователь мог только инициировать событие при нажатии, а затем выполнять функцию, только если определенная переменная имеет значение true. Например:

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