В vue.js, как я могу отобразить список как атрибуты элемента, а не как несколько элементов

#vue.js #vue-component

Кажется , я не могу найти функциональность, аналогичную v-for , но для атрибутов.

Я бы хотел что-то вроде:

 <div><data-attrs v-for="item in myattrlist">data-{{item.name}}="{{item.value}}"></data-attrs></div>

что затем привело бы к

 <div data-name1="value1" data-name2="value2"></div>

Моего поиска-фу недостаточно, чтобы найти, как это можно сделать.

Вы можете передать объект v-bind , и атрибуты будут назначены из объекта,

 <!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

В вашем случае это было бы что-то вроде этого,

 <div v-bind="myattrlist.reduce((attrObj, attr) => ({...attrObj, ['data-'   attr.key]: attr.value}), {})"></div>

Хотя я бы предложил создать attrObj его в data() методе, а не в шаблоне