Как добавить или удалить свойство кнопки

Question

Предположим, у меня есть простая кнопка в моем шаблоне Vue. js, которая вызывает метод, подобный этому:

<q-btn label="login" @click="signIn" />

Как только метод будет завершен, я бы хотел, чтобы кнопка была изменена на это:

<q-btn label="Bob" to="/settings" />

Проблема в том, что невозможно объединить @click с директивой to в одной кнопке.

В таком случае лучше всего использовать v-if="signedIn", который вызывает две разные кнопки (показать button a, если не выполнили вход, а еще показать button b)? Или есть способ удалить обработчик события @click и заменить его на to?

Каков предпочтительный способ обработки этого?

Answer 1

Я бы рекомендовал вам использовать v-if, потому что Vue распознает, что это тот же элемент, и заменит только атрибуты и фрагменты компонента, который использует эти пропуски / слушатели.

Вы можете сделать это самостоятельно с помощью динамически связывающих реквизитов и слушателей с помощью v-bind & v-on. Но это не имеет смысла в этом случае.

Этот случай описан здесь: https://vuejs.org/v2/guide/conditional.html#Controlling -Reusable-Elements-with-key