Proper way to show array inside an array with v-for - arrays

Question

I am trying to display the values of the text array/object but I am getting an output trying to show me paragraphs for every name inside the array/object.
Link to current result: current result
I am fairly new to vue.js so any tips are welcome!
<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>
I only want to show text.degree once for schoolyear="2016 - 2017"

Answer 1

It's not completely clear to me what you want, but maybe is it that you want to iterate through the .text array and, for each entry in the array, display both its key and its content. If so, you might try something like:
<p v-for="(entry, index) in time.text" :key="index">
{{Object.keys(entry)[0]}}: {{Object.values(entry)[0]}}
</p>
If you need to worry about title case for the keys, you could either use a computed property to convert the array, or define a method to convert each string.

Answer 2

First of all thanks to Boussadjra Brahim for providing the codepen wich resolved my issue.
I will first rephrase the question and then copy the solution.
The question: I want to print out values from an array inside a javascript object. In my <div>tag is is currently printing trying to print out text.institution for each element in the text array.
resulting in vue.js trying to show <p>Institution: {{ text.institution }}</p>
for degree, institution and where. Giving a browser output of:
<p>Degree:</p>
<p>Institution: Thomas More University of Applied Science"</p>
<p>Where:</p>
for text.where this would change to
<p>Degree:</p>
<p>Institution:</p>
<p>Where: Belgium, Geel</p>
The answer: Yet again a huge thanks to Boussadjra Brahim for showing the solution.
/* 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>
I changed the text array from square brackets to curly brackets and instead of using a v-for= I changed to a :set=.