Vuejs returns [object Object] from data attribute
Solution 1
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".
Solution 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)
}
}
...
Solution 3
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);
}
}
hidar
Updated on September 09, 2022Comments
-
hidar over 1 year
I have the following jsfiddle example (check the console) and all you will see is
[object Object]
instead ofperson
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 functionaddDetail()
withe.target.dataset.identity
then all I get is[object Object]
and not the json data. I have triedJSON.parse
andString
methods, non of them work.-
hannes neukermans over 6 yearswould @click="addDetail(person)" do the trick ?
-
Nemani over 6 yearsdoes it show
[object Object]
when you try to log the object? -
hidar over 6 years@Nemani yes, you can see the jsfiddle console I only get
[object Object]
-
hidar over 6 years@hannesneukermans It does not matter how person is passed, I always get the
[object Object]
output
-
-
hidar over 6 yearsIt's still the same, no difference from the output I was getting
-
hidar over 6 yearsI don't know why your jsfiddle isn't working. Did you forget to update it? Because I still don't understand
-
hidar over 6 yearsThanks. But you are still passing
person.name
if I have to do it your way, I would need manydata-
attributes. I just want to pass the wholeperson
object in one data attr -
Nemani over 6 yearsAs mentioned in my Answer, you can't pass object to data attribute, data attribute converts any passed value to
String
-
Nemani over 6 yearsinstead you can pass person object to
addDetail
function -
Nafiul Islam over 6 yearsI 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