VueJS привязка пользовательских директив к зацикленным компонентам на основе условия

Question

Допустим, у меня есть список, подобный этому:

[{name: "test-a", directive: "v-testa"}, {name: "test-b", directive: "v-testb"}, {name: "test-c", directive: "v-testc"}]

, и я проведу l oop через это и хочу получить такой результат.

<ul>
 <li v-testa>test-a</li>
 <li v-testb>test-b</li>
 <li v-testc>test-c</li>
</ul>

, если я что-то сделаю глупо, как это не будет работать:)

<ul>
 <li v-for="item in list" item.directive>{{item.name}}</li>
</ul>

Как я могу достичь желаемого результата?

Answer 1

Я думаю, что предпочтительным способом достижения чего-то подобного является следующий:

new Vue({
  el: '#app',
  data: {
    list: [
      { name: "test-a", directive: "v-testa" },
      { name: "test-b", directive: "v-testb" },
      { name: "test-c", directive: "v-testc" }
    ]
  },
  methods: {
  	
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>List:</h2>
  <ol>
    <li v-for="item in list" :data-directive="item.directive">
       {{ item.name }}
    </li>
  </ol>
</div>

Поскольку, если вы начнете создавать свои собственные атрибуты, вы столкнетесь с двумя проблемами:

1. Валидатор HTML примет что ваш атрибут неверен
2. Вы конкурируете с другим кодом, который также создает свои собственные атрибуты

Префикс атрибута данных имеет два преимущества:

1. HTML валидаторы будут игнорировать атрибут при выполнении валидации
2. JavaScript соберет эти атрибуты в специальный объект data для обеспечения легкого доступа

Таким образом, используя данные - префикс позволяет работать с недопустимым атрибутом, сообщая валидатору игнорировать его.

Answer 2

Вы можете сделать это, но нужно использовать другой синтаксис v-bind.

Вы передаете объект, ключами которого является имя атрибута HTML.

Вы можете создать объект во время выполнения, используя Computed property names для инициализации объекта

Попробуйте это

<ul>
 <li v-for="item in list" v-bind="{[`${item.directive}`]: ''}">{{item.name}}</li>
</ul>