Check out this complete example first: https://jsfiddle.net/3bzzpajh/
I'm facing a challenge where I want to pass the entire person object to the method showSelectedData. However, when I try to attach the person object to a data attribute like :data-person="person", it turns into something like [object Object], making it unusable within my method:
<div id="app">
<select name="" id="" @change="showSelectedData($event)" >
<option :value="person.name" :data-name="person.name" v-for="person in people[0]"> {{ person.name }}</option>
</select>
</div>
In the code above, I am currently passing the person's name like :data-name="person.name", but this approach becomes cumbersome when the person object has multiple properties.
This is the context of my Vue.js application:
new Vue({
el: '#app',
data () {
return {
people: [{
'1': {
'code': 1010,
'name': 'sam',
'status': 'ACTIVE',
'class': 'RED',
'currencyCode': 'CHF'
},
'2': {
'code': 1210,
'name': 'jane',
'status': 'ACTIVE',
'class': 'WHiTE',
'currencyCode': 'NA'
},
'3': {
'code': 7777,
'name': 'luis',
'status': 'ACTIVE',
'class': 'BLUE',
'currencyCode': 'DE'
},
'4': {
'code': 443,
'name': 'dave',
'status': 'ACTIVE',
'class': 'GREEN',
'currencyCode': 'FR'
}
}]
}
},
methods: {
showSelectedData: function (event) {
console.log(event.target.selectedOptions[0].dataset.name)
}
}
})
Therefore, how can I access the person object inside showSelectedData when a dropdown option is selected?