How to pass object from data attributes to methods in VueJS

Question

Here is the complete example first: https://jsfiddle.net/3bzzpajh/

What I am trying to achieve is, to pass the whole person object to my method showSelectedDat, for some reason attaching the person object to a data attribute like: :data-person="person" changes the object to something like [object Object] which becomes useless inside 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>

As shown in the above code, I am currently "passing person" name like :data-name="person.name" but this becomes cumbersome when person has many properties.

This is where my vuejs 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)
    }
  }
})

So, to recape, how do I get person inside showSelectedData when a dropdown is selected?

What do you mean? I am a beginner, but I don't think I can use v-model at least not with onchange — hidar
– hidar, Commented Sep 21, 2017 at 19:55

Bert · Accepted Answer · 2017-09-21 19:58:44Z

3

This is typically done in Vue by binding a data element to the select using v-model.

Define a data element called selectedPerson.

data:{
  selectedPerson: null,
  ...
}

Reference that using v-model.

<select v-model="selectedPerson">

Use the person as the value in the options.

<option :value="person" v-for="person in people[0]"> {{ person.name }}</option>

Now, whenever a person is selected, selectedPerson will be the entire person. You don't need to use the change event at all, you don't need to bind it to data, and you don't need to look for it by index. When you need the selected person, just reference the data value.

answered Sep 21, 2017 at 19:58

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Comments

SpeekaDievs · Accepted Answer · 2017-09-21 19:50:18Z

You could store the selected object key with v-model and get the person object later with the saved key. Of course you could use any other identification, for example you could save the object ID if it actually has one, and later on just find the object by that ID.

<div id="app">
  <select name="" id="" @change="showSelectedData($event)" v-model="current_person_key">
    <option :value="index" :data-name="person.name"  v-for="(person, index) in people[0]"> {{ person.name }}</option>
  </select>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      current_person_key: -1,
      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) {
        var person = this.people[0][this.current_person_key];
        console.log(person)
    }
  }
})

Collectives™ on Stack Overflow

How to pass object from data attributes to methods in VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related