Можно ли охватывать в шаблонах VueJS, чтобы вам не приходилось повторять имена объектов при обращении к свойствам?

Question

Я портирую некоторый код из KnockoutJS в VueJS для работодателя, а в Knockout есть директива with, которая позволяет ссылаться на свойства объекта без повторения имени объекта.

Как мне это сделать в VueJS? Я попытался изучить область действия слота и шаблона и даже попытался создать свою собственную пользовательскую директиву, которая изменила свойство data в указанном ссылочном VNode, но я не смог заставить его работать.

Текущий код:

<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>