javascript - 是否可以在 VueJS 模板中限定范围，以便在引用属性时不必重复对象名称？

Question

我正在为雇主将一些代码从 KnockoutJS 移植到 VueJS，在 Knockout 中，他们有一个 with 指令，允许在不重复对象名称的情况下引用对象属性。

我如何在 VueJS 中执行此操作？我尝试查看插槽范围和模板范围，甚至尝试创建我自己的自定义指令来修改引用 VNode 上的 data 属性，但我无法让它工作。

当前代码:

<div v-for="item in items">
  <div>{{item.name}}</div>
  <div>{{item.phone}}</div>
  <div>{{item.value}}</div>
</div>

伪代码:

<div v-for="item in items" v-with="item">
  <div>{{name}}</div>
  <div>{{phone}}</div>
  <div>{{value}}</div>
</div>

我问这个纯粹是出于可读性目的，因为我已经在引用其属性时使用重复的对象标识符完成了任务，但我想问一下以防万一我遗漏了什么。

VueJS 聊天室有人建议使用 Vuex 商店，但他们的示例似乎没有解决我对重复命名的担忧。

Answer 1

你总是可以在 v-for 循环中解构你的对象，比如:

<div v-for="{name, phone} in items">

一个例子是:

new Vue({
    data: {
        items: [
            {
                name: 'John',
                phone: '123-456-7890',
                otherVal: 'hello'
            },
            {
                name: 'Joe',
                phone: '234-567-8901',
                otherVal: 'goodbye'
            }
        ]
    }
}).$mount('#demo')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">  
  <div v-for="{name, phone} in items">
    {{ name }} {{ phone }}
  </div>  
</div>