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