0

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

<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"
                ]
            },
        ]
    }
}
2
  • 1
    Это вероятно, просто опечатка - удалите двоеточие :v-for="item in info.list" -> v-for="item in info.list" 22 дек 2020 в 9:02
  • Вы были правы, не привык еще к синтаксису vue, помогло
    – DeeEss
    22 дек 2020 в 9:15

1 ответ 1

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>

2
  • Спасибо, не знал что есть такой оператор как !!, погуглил, оказалось что он возвращает только буллинговое значение
    – DeeEss
    22 дек 2020 в 9:31
  • 1
    Поправляю вас - Булево*)
    – doox911
    22 дек 2020 в 9:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.