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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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