Vuejs returns [object Object] from data attribute

Question

I have the following jsfiddle example (check the console) and all you will see is [object Object] instead of person data:

So, basically I have a vuejs instance and a div for v-for to iterate an object

<div id='app'>
  <p v-for="person in people[0]"> 
    <span> {{ person.name }}</span>
        <i class="fa fa-check" 
        v-bind:data-identity="person" 
        @click="addDetail($event)"></i>
  </p>
</div>

The problem is that if I echo {{ person }} I can see a JSON data on the page, but if I try to get it in the function addDetail() with e.target.dataset.identity then all I get is [object Object] and not the json data. I have tried JSON.parse and String methods, non of them work.

does it show [object Object] when you try to log the object? — Nemani
– Nemani, Commented Aug 30, 2017 at 8:06
@Nemani yes, you can see the jsfiddle console I only get [object Object] — hidar
– hidar, Commented Aug 30, 2017 at 8:11
@hannesneukermans It does not matter how person is passed, I always get the [object Object] output — hidar
– hidar, Commented Aug 30, 2017 at 8:11

Nemani · Accepted Answer · 2017-08-30 08:45:50Z

3

v-bind:data-identity="person" coverts person to string hence you can't attach an object to dataset as any object.toString() method returns [Object object] and you are getting the same

try to attach any string like person.name and see if it is reflected in your dataset

https://jsfiddle.net/qthg4Lwm/

hope this will help :)

EDIT: All data attributes are string read this article

from above article

Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5".

edited Aug 30, 2017 at 8:45

answered Aug 30, 2017 at 8:37

Nemani

7826 silver badges12 bronze badges

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

4 Comments

hidar Over a year ago

I don't know why your jsfiddle isn't working. Did you forget to update it? Because I still don't understand

hidar Over a year ago

Thanks. But you are still passing person.name if I have to do it your way, I would need many data- attributes. I just want to pass the whole person object in one data attr

Nemani Over a year ago

As mentioned in my Answer, you can't pass object to data attribute, data attribute converts any passed value to String

Nemani Over a year ago

instead you can pass person object to addDetail function

reinarg · Accepted Answer · 2017-08-30 09:19:33Z

2

You shouldn't try to access "person" through event and the DOM but give it as parameter to the function addDetail

Template

<div id='app'>
  <p v-for="person in people[0]"> 
    <span> {{ person.name }}</span>
        <i class="fa fa-check" 
        @click="addDetail(person)"></i>
  </p>
</div>

Script

...
methods: {
  addDetail: function(person){
    console.log(person)
  }
}
...

answered Aug 30, 2017 at 9:19

reinarg

4565 silver badges6 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 22:34:46Z

2

Just passing handler method @click is enough. See Vue reference for event handling

Template:

<i class="fa fa-check" @click="addDetail(person)"></i>

JS:

methods: {
  addDetail: function (person) {
    console.log(person);
  }
}

edited Jul 15, 2022 at 22:34

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 30, 2017 at 8:07

Nafiul Islam

1,2208 silver badges20 bronze badges

2 Comments

hidar Over a year ago

It's still the same, no difference from the output I was getting

Nafiul Islam Over a year ago

I have edited my answer. By doing this you'll get the person object every time you click on i tag. Please check and let me know

przbadu · Accepted Answer · 2023-01-24 06:15:35Z

1

For me using JSON.stringify() solved that problem:

v-bind:data-identity="person"

will give data-identity="[object object]"

Where as:

v-bind:data-identity="JSON.stringify(person)"

will convert your json/object to string, and it will work

data-identity="{"id":1,"name":"User 1"}"

answered Jan 24, 2023 at 6:15

przbadu

6,0897 gold badges47 silver badges69 bronze badges

Comments

itzhar · Accepted Answer · 2020-09-05 21:22:50Z

0

in my case i have the same var name in html (inside v-for) & and in data function and everytime another var been used by browser...

edited Sep 5, 2020 at 21:22

answered Jun 25, 2020 at 13:59

itzhar

13.1k6 gold badges62 silver badges65 bronze badges

Collectives™ on Stack Overflow

Vuejs returns [object Object] from data attribute

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related