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

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

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

app.post("/upload", async (req, res) => {
  const file = req.files.file;
  const filePath = "divali";

  file.mv(filePath, async (err) => {
    const nfile = fs.readFileSync(filePath);
    let fileData = nfile.toString("hex");
    let result = [];
    for (var i = 0; i < fileData.length; i += 2)
      result.push("0x" + fileData[i] + "" + fileData[i + 1]);

    console.log(result);

    var pfile = new Blob([result], { type: "application/pdf" });
    // var fileURL = URL.createObjectURL(pfile);
    console.log(pfile);

    pfile.lastModifiedDate = new Date();
    pfile.name = "some-name";

    console.log(pfile);
  });
});

：）

Answer 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中显示了这种模式

Vue.js本地模板变量

2 个答案: