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

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

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

Я новичок в 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.grade только один раз для schoolyear="2016 - 2017"

попробуй Degree: {{ text.degree }}

— 20.01.2019 00:56

К сожалению, это не решает проблему. Также кажется огромным объемом работы, если вы работаете с большими массивами...

— 20.01.2019 01:02

пожалуйста, перефразируйте вашу проблему, так как я неправильно вас понял

— 20.01.2019 01:04

У вас есть контроль над объектом/временной шкалой?

— 20.01.2019 01:22

я вижу, что ваш текстовый объект должен быть таким, как я здесь

— 20.01.2019 01:29

или вы можете попробовать это

— 20.01.2019 01:41

arrays vue.js v-for

20.01.2019 00:47

Структурированный массив Numpy

Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...

3 эффективных способа найти максимальное значение в массивах JavaScript

T - 1Bits: Генерация последовательного массива

По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...

Что такое деструктуризация массива в JavaScript?

Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.

881

Ответы 2

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

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

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

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

— 20.01.2019 02:48

20.01.2019 02:42

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

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

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

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

Degree:

Institution: Thomas More University of Applied Science"

Where:

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

Degree:

Institution:

Where: Belgium, Geel

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

/* 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=.

20.01.2019 10:24