Рендеринг массива Vuejs

Question

Я использую Vuejs для своего проекта и хочу отобразить массив.Это данные:

data() {
  return {
  people: [
      {"name": "Emily","properties": ["nice","good"]},
      {"name": "John","properties": ["bad","not good"]}
    ]
  }
}

Поэтому я хочу, чтобы эти данные отображались следующим образом:

<ul>
  <li>Emily : <p>- nice</p><p>- good</p></li>
  <li>John : <p>- bad</p><p>- not good</p></li>
</ul>

И мой вопрос: как я могу сделать это в Vuejs динамически?

Answer 1

Используйте v-for:

<ul>
  <li v-for="(person, i) in people" :key="i">{{ person.name }} : 
      <p v-for="(property, j) in person.properties" :key="j">- {{ property }}</p>
  </li>
</ul>

Вторые значения в каждом v-for, i и j являются индексом текущего элемента.Мы специально используем его здесь для привязки к свойству key, что помогает предотвратить проблемы рендеринга.

Надеюсь, это поможет!