vue.js - How can I loop through an object with Vue, similar to PHP?
Solution:
You can loop through the properties of an object in a Vue template like this:
<div v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</div>
Keep in mind that, strictly speaking, objects do not have a defined order in JavaScript. Vue.js takes the order of Object.keys()
, which might have an output you are not expecting. Usually you would want to use arrays in such a case.
See also the documentation: https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object
Answer
Solution:
Arrays do not have keys in JavaScript.
Consider using an object instead, like this
notAnArray : {
'one': '1 Year',
'two': '2 Year',
'three': '3 Year'
}
See this example with arrays in Vue.
template
<div v-for="(val, index) in array" :key="index">
<p>
{{val}}
</p>
</div>
Array
array : [
"1 Year",
"2 Year",
"3 Year"
]
Source