Vuejs v-for l oop с комбинацией тегов - PullRequest
Новая
       86

Vuejs v-for l oop с комбинацией тегов

0 голосов
/ 08 мая 2020

Я хочу l oop два тега списка для каждого l oop v-for без зацикливания ul. Есть ли какой-либо внутренний цикл, доступный в vuejs, чтобы избежать тега ul путем зацикливания, или есть какой-либо другой метод. 

<ul id="example-1" v-for="(item, index) in items" :key="item.message">
  <li >
    {{ item.message }}
  </li>
  <li>
   {{ item.text}}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo', text: "baz" },
      { message: 'Bar', text: "quz" }
    ]
  }
})

Очевидный результат, который я могу получить:

Foo Bar


baz quz


Результат Что мне нужно:

Foo baz Bar quz

1 Ответ

2 голосов
/ 08 мая 2020

Вы можете l oop на теге <template>. 

<ul id="example-1">
  <template v-for="item in items">
    <li>
      {{ item.message }}
    </li>
    <li>
     {{ item.text}}
    </li>
  </template>
</ul>

Вам нужно будет назначить ключи внутренним элементам, поскольку шаблоны не могут быть введены с помощью ключей.

...