Vue.js локальные переменные шаблона - PullRequest
Новая
       11

Vue.js локальные переменные шаблона

0 голосов
/ 11 декабря 2018

У меня есть необходимость создать локальную переменную в моем шаблоне Vue, чтобы сократить ссылки на длинный объект $v.form.text, как показано в примере ниже: 

<input 
    :class="{ error: !$v.form.text.required }"
    v-model.trim="$v.form.text.$model" 
/>

Я хотел бы иметь возможностьчтобы получить доступ к вложенному объекту $v.form.text в моем шаблоне просто: text. 

<input 
    :class="{ error: !text.required }"
    v-model.trim="text.$model" 
/>

Обычно кода намного больше, чем в примере выше, что оправдывает создание временной переменной, но проблема заключается в том, чтокак показано.

Примечание. Я уже решил эту проблему, см. ответ ниже и просто хочу задокументировать решение для тех, кто может искать то же самое.

1 Ответ

0 голосов
/ 11 декабря 2018

Конечно, я мог бы просто использовать вычисляемую функцию для этого, но в некоторых случаях это невозможно, например, когда вы находитесь внутри v-for и хотите, чтобы вычисляемое вами ссылалось на переменную итератора цикла.В таких случаях мое решение выглядит следующим образом: 

<div :set="text=$v.form.text">
    <input 
        :class="{ error: !text.required }"
        v-model.trim="text.$model" 
    />
</div>

Для тех, кто сейчас думает: «Эй, я не знал, что в Vue был незарегистрированный :set», нет .

То, что я делаю здесь, полагается на то, что Vue будет оценивать JavaScript любых связанных атрибутов, и я просто решил изобрести неиспользуемый атрибут с именем :set.

В качестве напоминаниясвязанный атрибут - это атрибут с префиксом : или v-bind:.Выражение JavaScript внутри двойных кавычек будет оцениваться в контексте текущего компонента, а переменная item будет по-прежнему доступна за пределами v-for, в котором она устанавливается.Таким образом, это не локальная переменная, как таковая, а локально назначенная переменная области видимости компонента.

Убедитесь, что добавили эту переменную в объявления переменных в хуке данных. 

data() { return { 
    text: '' 
}}

Вот ссылка на CodePen, показывающая этот шаблон на работе https://codepen.io/pbastowski/pen/PXqjPG?editors=1100

...