时间戳

首页 > 解决方案 > Vue.js 本地模板变量

templates - Vue.js 本地模板变量

问题描述

我需要在我的 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" 
/>

通常有比上面的示例更多的代码，证明创建一个临时变量是合理的，但问题与所示相同。

注意：我已经解决了这个问题，请参阅下面的答案，并且只是想为可能正在搜索相同问题的其他人记录解决方案。

标签： templatesvariablesvue.jslocal

解决方案

我刚刚遇到了同样的问题，并想到了另一种黑客/解决方法......注意我还没有尝试过，但应该可以。

只需将 v-for 与包含长表达式的单个内联数组一起使用，即

<span v-for="item in [my.big.long.expression.item]">{{item.foo}} {{item.bar}}</span>

:)

推荐阅读