How can I loop through an object with Vue, similar to 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

An array in JS is something looking like x = [1, 2, "nice", true, "okay"]. So, basically your $array and $object are the same in JS, both are objects. Also, what exactly are you trying to achieve as an end result: some i18n with one/ 1 year/one year? — kissu
– kissu, Commented Apr 16, 2021 at 15:54
I want to print the values in the object on the screen. 1 Year' '2 Year' '3 Year' — SemsiPasa
– SemsiPasa, Commented Apr 16, 2021 at 16:08
@SemsiPasa Have you tried vanilla JS Object.keys(your_object)? — mighty_dev
– mighty_dev, Commented Apr 16, 2021 at 16:27
I guess I can't express myself. We put the object_zero in the for loop and get its keys. but as in php in the form object->$ key When we type object.key, we cannot print the data of the other object on the screen. but when there is an array, we can write to the screen as array [key]. — SemsiPasa
– SemsiPasa, Commented Apr 16, 2021 at 18:15

tony19 · Accepted Answer · 2022-07-15 04:46:17Z

20

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

edited Jul 15, 2022 at 4:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 16, 2021 at 16:48

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kissu Over a year ago

Maps are also a good alternative if you want to preserve the order.

SemsiPasa Over a year ago

I guess I can't express myself. We put the object_zero in the for loop and get its keys. but as in php in the form object->$ key When we type object.key, we cannot print the data of the other object on the screen. but when there is an array, we can write to the screen as array [key].

ssc-hrep3 Over a year ago

Is object_zero an array or an object? If it is an object, you can use my example above, if it is an array, you can use the example by @tauzN. The variable key and value in my example are automatically set to the property key and value in each loop. If this does not answer your question, you definitely need to elaborate what the problem is.

SemsiPasa Over a year ago

@ssc-hrep3 "echo $object->$key;" I can print with php this way. value in another object. I'm doing the same with php. "echo $object->one;" -> 1 Year . On the vuejs side, let's take two arrays as an example. Let array1 enter the for loop and get its index. <div v-for = "(item, index) in array1"> {{ array2 [index] }} </div> this works. but in case of an object, let's say object1 and object2 as an example. Let's put object1 into the for loop and get the key value. <div v-for = "(val, key, index) in object1"> {{ object2.key }} </div> it doesn't work that way.

ssc-hrep3 Over a year ago

key is in that case a variable. You are accessing the property "key" of object2 instead of the value behind the variable key. Use object2[key] instead instead of object2.key.

tauzN · Accepted Answer · 2021-04-16 16:20:09Z

1

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

edited Apr 16, 2021 at 16:20

answered Apr 16, 2021 at 16:05

tauzN

7,4872 gold badges22 silver badges23 bronze badges

6 Comments

SemsiPasa Over a year ago

This is definitely not what I am asking. I want to use the key of an array and show the value in the object.

tauzN Over a year ago

@SemsiPasa Arrays do not have keys in JavaScript. Simple as that.

tauzN Over a year ago

@SemsiPasa See the updated answer for a solution with an object that might work for you.

SemsiPasa Over a year ago

I realized I was asking the question wrong, sorry, I updated the question.

tauzN Over a year ago

@SemsiPasa My solution does exactly what you ask. <div v-for="(val, key, index) in array" :key="index"><p>{{val}}</p></div>

|

Collectives™ on Stack Overflow

How can I loop through an object with Vue, similar to PHP?

2 Answers 2

5 Comments

Consider using an object instead, like this

template

Array

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Consider using an object instead, like this

template

Array

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related