Почему вложенный v-for не отрабатывает?

Question

[Andrej Sharapov]

Почему список не выводится?

new Vue({
  el: " #popup-modal",
  data() {
    return {
      listItem: [
        {
          title: 'text 1',
          object: [
            { name: '1', link: '#' },
            { name: '2', link: '#' },
            { name: '3', link: '#' },
          ]
        },
        {
          title: 'text 2',
          object: [
            { name: '1', link: '#' },
            { name: '2', link: '#' },
            { name: '3', link: '#' },
          ]
        }
      ]
    }
  },
  template: `
  <div id="popup-modal" class="hidden">
    <template v-for="item in listItem" :key="item.id">
    <div>
      <h3>{{ item.title }}</h3>
      <ul>
        <li v-for="{name, link} in listItem.object"><a :href="link" :title="name" target="_blank" rel="norefferer noopener">{{ name }}</a>
        </li>
      </ul>
    </div>
    </template>
  </div>
`
})

Answer 1

[0xD34F]

Должно быть item.object вместо listItem.object.

Зачем template? Уберите. А v-for перенесите на вложенный элемент.

Comments

[Andrej Sharapov]

точно! который раз выручаете. Спасибо.