如何使用 Vue 循环通过 object，类似于 PHP？

Question

I have a my object as follows

$object_zero = {
    'one' : 'one year',
    'two' : 'two year',
    'three' : 'there year',
    'four' : 'four year',
    'five' : 'five year',
    'six' : 'six year',
    'seven' : 'seven year',
    'eight' : 'eight year',
};

I have a my other object as follows

$object = { 'one' : '1 Year', 'two' : '2 Year', 'three' : '3 Year', 'akta' : '12', 'mars' : '48' }

I can do it in php as follows.

foreach($object_zero as $key => $val){
     echo $object->$key;
}

so how do i do this with vue.js?

I could not start it. my goal is to just write text containing the keys of the first object

<div v-for="(v, k, index) in data.object_zero">
      <p v-if="object.k" class="mb-0">
          {{ object.k }} - 
      </p>
</div>

For example, only these should be written on the screen.

print: 1 Year - 2 Year - 3 Year

Answer 1

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 2

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"
]