用v-for

Question

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

链接到当前结果：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。

Answer 1

我尚不清楚您想要什么，但是也许是您想要遍历.text数组，并针对该数组中的每个条目同时显示其键和内容。如果是这样，您可以尝试以下操作：

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

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

Answer 2

首先感谢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>

答案：再次感谢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=。