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>

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

1 个答案: