Vue.js 本地模板变量

Question

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

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

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

Answer 1

我当然可以只使用计算函数来执行此操作，但在某些情况下这是不可能的，例如当您在 a 内部v-for并希望计算函数引用循环的迭代器变量时。对于这种情况，我的解决方案如下：

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

对于那些现在可能会想“嘿，我不知道:setVue 中有无证文件”的人来说，其实没有.

我在这里所做的依赖于这样一个事实：Vue 将评估任何绑定属性的 JavaScript，而我只是选择发明一个名为 的未使用属性:set。

提醒一下，绑定属性是以:或为前缀的属性v-bind:。双引号内的 JavaScript 表达式将在当前组件的上下文中进行计算，并且该变量在设置它的item外部仍然可用。v-for因此，它不是本地变量，而是本地分配的组件范围变量。

确保将此变量添加到数据挂钩中的变量声明中。

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

以下是 CodePen 的链接，显示了这种工作模式https://codepen.io/pbastowski/pen/PXqjPG?editors=1100

Answer 2

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

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

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

:)