Vue.js 本地模板变量答案

【问题标题】：Vue.js local template variablesVue.js 本地模板变量
【发布时间】：2018-12-11 20:54:32
【问题描述】：

我需要在我的 Vue 模板中创建一个局部变量，以缩短对原本很长的对象 $v.form.text 的引用，如下例所示：

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

我希望能够以简单的text 访问模板中的$v.form.text 嵌套对象。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我当然可以只使用计算函数来执行此操作，但在某些情况下这是不可能的，例如当您在 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

【讨论】：