使用 v-for 在数组中显示数组的正确方法答案

【问题标题】：Proper way to show array inside an array with v-for使用 v-for 在数组中显示数组的正确方法
【发布时间】：2019-01-19 23:47:39
【问题描述】：

我正在尝试显示文本数组/对象的值，但我得到一个输出，试图显示数组/对象中每个名称的段落。

链接到当前结果：current result

我是 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>

我只想为 schoolyear="2016 - 2017" 显示一次 text.degree

【问题讨论】：

试试Degree: {{ text.degree }}
很遗憾，这并不能解决问题。如果您使用大型数组，这似乎也是一项巨大的工作......
请重新表述您的问题，因为我误解了您
你能控制对象/时间线吗？
我看到你的文本对象应该和我做的一样here

标签： arrays vue.js v-for

【解决方案1】：

我并不完全清楚你想要什么，但也许是你想要遍历 .text 数组，并为数组中的每个条目显示其键和内容。如果是这样，您可以尝试以下方法：

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

如果您需要担心键的标题大小写，您可以使用计算属性来转换数组，或者定义一个方法来转换每个字符串。

【讨论】：

您可以使用过滤器将键的第一个字母大写

【解决方案2】：

首先感谢Boussadjra Brahim 提供的codepen 解决了我的问题。

我将先改写问题，然后复制解决方案。

问题：我想从 javascript 对象内的数组中打印出值。在我的<div>tag 中，当前正在打印尝试为text 数组中的每个元素打印出text.institution。

导致 vue.js 试图显示 Institution: {{ text.institution }} 学位、机构和地点。给出浏览器输出：

Degree:

Institution: Thomas More University of Applied Science"

Where:

对于text.where，这将更改为

Degree:

Institution:

Where: Belgium, Geel

答案：再次感谢 Boussadjra Brahim 提供解决方案。

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

【讨论】：