Как сделать определение поведения в vuejs на основе класса?

Question

[Антон Иванов]

Всем привет.

Продолжаю осваивать Vue.JS, поэтому вопрос может быть нубский и некоррекнтный :)

У меня есть форма, в которой есть поля для ввода. На @click (допустим) для каждого поля у меня делается определенное действие. Теперь стоит задача повесить еще один обработчик на onfocus. Для этого мне придется руками добавлять @focus="onFocus". Но что если полей для ввода очень много? Неудобно и неэффективно получается ведь. С использованием старого доброго jQuery (да и с vanilla javascript) я мог повесить обработчик на все эти элементы одной строчкой. С Vue так не прокатит?

Спасибо.

Answer 1

[Алексей Шашенков]

А refs для кого сделаны?
тук, как пример

Comments

[Антон Иванов]

Спасибо, похоже это то, что нужно

Answer 2

[Dima Polos]

Смотрите на директиву v-for, и пробуйте:)

Comments

[Антон Иванов]

Это первое, что пришло мне в голову, но это потребует описания списка полей в параметрах компонента. Плюс что если для одного из полей ввода надо использовать доп. класс?

[Dima Polos]

Инпуты можно распечатать и из массива с пустыми строками. Для работы с каждым инпутом можно использовать метод, который принимает event, и через e.target работать. Можно создать массив строк, каждая строка это классы, которые надо задавать инпутам, и например, 4му и 16му передать какой-то свой класс, который потом через v-for распечатается. Можно создать какие-то вычисляемые поля, которые будут по алгоритму создавать массив с классами, а v-for их выводит, изменится что-то, изменится массив, соответственно и инпуты получат новые классы.

[Антон Иванов]

Видите, сколько сложностей против одной строчки? :)

[Dima Polos]

Антон Иванов, да, много, вот выше ответ тоже хороший дали, просто jq и vue это инструменты не взаимозаменяемые, а каждый для своей цели, иногда даже дополняют друг друга :)