Как сделать 2 массива во Vue?

Question

[Тамерлан Годжиев]

Здравствуйте. Есть вот такая простая конструкция во Vue

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

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

С эитим понятно, но если я хочу создать еще один список и в нем выводить дугой массив и его элементы?

Comments

[Roman K]

Что тебя останавливает?

[Koteezy]

Вы о чем? О вложенных циклах?

data: {
    items: [
      { message: 'Foo', subItems: [1,2,3] },
      { message: 'Bar', subItems: [1,2,3] }
    ]
  }

<li v-for="item in items">
    {{ item.message }}
    <li v-for="sub in item.subItems">{{ sub }}</li>
  </li>

Answer 1

[Александр]

Нужно просто создать второй список и отдельный ul для него

<div id="example-1">
<ul>
  <li v-for="item in items1">
    {{ item.message }}
  </li>
</ul>
<ul>
  <li v-for="item in items2">
    {{ item.message }}
  </li>
</ul>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items1: [
      { message: 'Foo' },
      { message: 'Bar' }
    ],
    items2: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Answer 2

[mShpakov]

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