Как задать checked для input type="radio" перед выполнением methods в Vue?

Question

[Андрей Брекоткин]

День добрый!
Что то сижу, туплю, не могу решить стандартную (казалось бы) задачу:
Есть несколько input type="radio" при клике нужно:
1. Проставить стандартное checked - выбрать этот пункт
2. и перейти к следующей форме

Задаю так:

<input type="radio" value="1" v-model="question.num1"  @click="toggleQuestion()">
<input type="radio" value="2" v-model="question.num1"  @click="toggleQuestion()">

...
	methods: {
		toggleQuestion(num) {
Переход к форме
                }
            }
	}
...

Только в данном случае сразу выполняется переход, input не меняет значение, не становиться checked
Как быть?

Answer 1

[coderisimo]

А если использовать @change вместо @click ? )

Comments

[Андрей Брекоткин]

Да, но в этом случае у меня вообще странная вещь получается... при переходе на следующую форму в ней сразу выбирается пункт... как будто: мы нажали мышь здесь... произошел change... выполнился переход.. показалась форма... а при отпускании мыши сработал change на input следующей формы...
____________________
В общем переключение формы было через v-if... и почему то с ним такое поведение. Переделал на v-show - все работает нормально... через @change

[Антон Антон]

Андрей Брекоткин, есть мнение, что у вас используется один и тот же объект для разных форм

[Андрей Брекоткин]

Антон Антон, да... и? Почему же во второй форме к другим input применяется change? Мне это не понятно

[Антон Антон]

Андрей Брекоткин, не применяется change, во второй форме checked проставляется на основе реактивного свойства. Кажется, вы не поняли суть Vue (и вообще реактивности, когда страница строится от данных, а не наоборот).

[Андрей Брекоткин]

Антон Антон, дык у первой формы input v-model="question.num1", у второй v-model="question.num2"...
Данные соответственно:

data: {
        question: {
            num1: '',
            num2: '',
        },
},

Данные разные... или я действительно чего то не понимаю?

[coderisimo]

Андрей Брекоткин, оптимально сделать проект на codepen и приложить здесь ссылку. тогда не нужно будет гадать на кофейной гуще , что не так ))

[Андрей Брекоткин]

coderisimo, лови https://codepen.io/brekot/pen/yLBpyeB

[Андрей Брекоткин]

Антон Антон, суть такая: https://codepen.io/brekot/pen/yLBpyeB

[Антон Антон]

Андрей Брекоткин,

<div v-if="quizStep == 1" :key="quizStep">
...
<div v-if="quizStep == 2" :key="quizStep">

[Андрей Брекоткин]

Антон Антон, как я понимаю это основывается на вот этом куске из документации

При обновлении Vue списка элементов, отображаемого директивой v-for, по умолчанию используется стратегия обновления «на месте». Если порядок элементов массива или объекта изменился, Vue не станет перемещать элементы DOM, а просто обновит каждый элемент «на месте», чтобы он отображал новые данные по соответствующему индексу. Во Vue версий 1.x подобное поведение достигалось указанием track-by="$index".

Режим по умолчанию эффективен, но применим только в случаях, когда результат отрисовки вашего списка не полагается на состояние дочерних компонентов или временные состояния DOM (например, значения полей форм).

Верно понимаю? Не совсем понял суть... то есть vue пытается при v-if вставить элементы на место прежних, а не создает заново?

[Андрей Брекоткин]

Антон Антон, просто выход то я уже нашел, пытаюсь понять почему происходит так, как происходит?

[Антон Антон]

Андрей Брекоткин, vue пытается как можно меньше дергать dom, что при одинаковых кусках может приводить к такому эффекту. но вообще похоже на ошибку, поскольку v-model все-таки разный. Другое дело, что ваш пример слишком синтетический, в реальности так не бывает. Ну а вообще добавление key помогает во многих случаях именно отцепить один кусок dom и прицепить другой, а не "мутировать" имеющееся поддерево.

[Андрей Брекоткин]

Антон Антон, из сказанного:
1. Пошел поищу побольше теории по vue... не ожидал я такого. Может вы подскажете что интересного к прочтению? Помимо документации
2. Как по мне это ошибка. Но теперь хоть более менее понятно откуда ноги растут.
3. Ну почему синтетический? Взят с реального проекта. Просто выкинул все, что не относиться к делу. Сама суть в том, что: есть список вопросов, при выборе ответа должен показываться следующий вопрос и т.д. Возможно вы как то по другому бы предложили это сделать? Но мне пришла в голову такая конструкция.

[Антон Антон]

Андрей Брекоткин, да, с checked реальная лажа :)
а вообще я бы сделал как-то так:
https://jsfiddle.net/6kab5n89/