Вывести массив внутри другого массива Vue JS

Question

Передаю пропсами массив объектов и в одном из объектов есть массив строк, как мне его правильно вывести?

<b-row
   class="justify-content-center"
   v-for="(info, index) in documentInfo"
  :key="index">
     <b-col
        class="document__parag"
        cols="10"
        xl="6"
     >
       <h4 class="document__parag__title subtitle">{{ info.title }}</h4>
       <p class="document__parag__desc subtitle">{{ info.desc }}</p>
       <ul>
          <li :v-for="item in info.list">
             {{ item }} // моя попытка (в итоге выводит массив в виде кода, а нужно чтобы выводило 
                           значение каждого элемента)
          </li>
       </ul>
     </b-col>
</b-row>

data() {
    return {
        pageTitle: "Privacy",
        pageName: "privacy",
        documentInfo: [
            {
                title: "INTRODUCTION",
                desc: "The website impact-forecast.com including the Climate impact",
            },
            {
                title: "SUMMARY",
                desc: "Only the information that you provide to sign up is processed and kept",
            },
            {
                title: "PERSONAL DATA WE PROCESS",
                desc: "Below you will find an overview of the personal data that we process:",
                list: [
                    "First and last name",
                    "Address data",
                    "Telephone number",
                    "E-mail address",
                    "Information about your activities on our website"
                ]
            },
        ]
    }
}

Answer 1

Так как у вас не в каждом элементе массива есть свойство list(по хорошему должно быть и быть либо пустым массивом, либо массивом строк), то необходимо проверять на наличие своства в объекте.

Вывод можно сделать как v-for так и .join(). В примере вывожу вторым способом.

new Vue({
  el: '#app',
  data() {
    return {
      pageTitle: "Privacy",
      pageName: "privacy",
      documentInfo: [{
          title: "INTRODUCTION",
          desc: "The website impact-forecast.com including the Climate impact",
        },
        {
          title: "SUMMARY",
          desc: "Only the information that you provide to sign up is processed and kept",
        },
        {
          title: "PERSONAL DATA WE PROCESS",
          desc: "Below you will find an overview of the personal data that we process:",
          list: [
            "First and last name",
            "Address data",
            "Telephone number",
            "E-mail address",
            "Information about your activities on our website"
          ]
        },
      ]
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, index) in documentInfo" :key="index">
    <p v-if="!!item.list"> {{ item.list.join() }} </p>
  </div>
</div>

БЛОГ НА HUSL

Вывести массив внутри другого массива Vue JS

Ответы (1 шт):