Правильный способ показать массив внутри массива с помощью v-for - PullRequest
Новая
       6

Правильный способ показать массив внутри массива с помощью v-for

0 голосов
/ 20 января 2019

Я пытаюсь отобразить значения текстового массива / объекта, но получаю вывод, пытаясь показать мне абзацы для каждого имени внутри массива / объекта.

Ссылка на текущий результат: текущий результат

Я новичок в vue.js, поэтому любые советы приветствуются! 

<template>
  <div class="education center">
    <div v-if="object.timelines != null">
      <template v-for="(time,index) in object.timelines">
        <p :key="index">{{ time.schoolyear }}</p>
        <div :key="index" v-bind="time" v-for="(text,index) in time.text">
          <p :key="text">Degree: {{ text.degree }}</p>
          <p>Institution: {{ text.institution }}</p>
          <p>Where: {{text.where}}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  el: ".education",
  data: function() {
    return {
      object: {
        timelines: [
          {
            schoolyear: "2016 - 2017",
            text: [
              { degree: "Applied Computer Science" },
              { institution: "Thomas More University of Applied Science" },
              { where: "Belgium, Geel" }
            ]
          },
          {
            schoolyear: "2018 - 2019",
            text: [
              { degree: "Business IT" },
              { institution: "HAMK University of Applied Science" },
              { where: "Finland, Hämeenlinna" }
            ]
          }
        ]
      }
    };
  }
};
</script>

Я хочу показать text.degree только один раз для schoolyear = "2016 - 2017 "

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Прежде всего, спасибо Boussadjra Brahim за предоставление кодового пера, который решил мою проблему.

Сначала я перефразирую вопрос, а затем скопирую решение.

Вопрос : Я хочу распечатать значения из массива внутри объекта javascript.В моем <div> теге в настоящее время печатается попытка распечатать text.institution для каждого элемента в массиве text.

, в результате чего vue.js пытается показать <p>Institution: {{ text.institution }}</p> для степень , учреждение и , где .Вывод в браузере:

<p>Degree:</p>

<p>Institution: Thomas More University of Applied Science"</p>

<p>Where:</p>

для text.where это изменится на

<p>Degree:</p>

<p>Institution:</p>

<p>Where: Belgium, Geel</p>

Ответ : Еще раз огромное спасибо Буссаджра Брахим для показа решения. 

/* eslint-disable vue/require-v-for-key */
<template>
  <div class="education center">
    <div v-if="object.timelines != null">
      <template v-for="(time,index) in object.timelines">
        <p :key="index">{{ time.schoolyear }}</p>
        <div :key="index" :set="text = time.text">
          <p>Degree: {{ text.degree }}</p>
          <p>Institution: {{ text.institution }}</p>
          <p>Where: {{text.where}}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  el: ".education",
  data(){
    return {
      object: {
        timelines: [
          {
            schoolyear: "2016 - 2017",
            text: {
              degree: "Applied Computer Science",
              institution: "Thomas More University of Applied Science",
              where: "Belgium, Geel"
            }
          },
          {
            schoolyear: "2018 - 2019",
            text: {
              degree: "Business IT",
              institution: "HAMK University of Applied Science",
              where: "Finland, Hämeenlinna"
            }
          }
        ]
      }
    };
  }
};
</script>

Я изменил текстовый массив с квадратных скобок на фигурные скобки и вместо v-for= я изменил на :set=.

0 голосов
/ 20 января 2019

Мне не совсем понятно, что вы хотите, но, возможно, вам нужно перебрать массив .text и для каждой записи в массиве отобразить и его ключ, и его содержимое.Если это так, вы можете попробовать что-то вроде: 

<p v-for="(entry, index) in time.text" :key="index">
    {{Object.keys(entry)[0]}}: {{Object.values(entry)[0]}}
</p>

Если вам нужно беспокоиться о регистре заголовка для ключей, вы можете использовать вычисляемое свойство для преобразования массива или определить метод для преобразования каждой строки.

...