How to make 2 arrays in Vue?

Question

Vue.js

Hello. There is such a simple construction in 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' }
    ]
  }
})

This is understandable, but if I want to create another list and display an arc array and its elements in it?

Answer 1

You just need to create a second list and a separate ul for it

<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

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