Bind object to element attribute in vue.js

Question

Consider

<ul>
  <li v-for="o in objects" v-on:click="click"></li>
</ul>

where objects in something like

var objects = [
    { derp: 1 },
    { derp: 2 },
];

in my click() function, I want to get access to o instance.

function click(event) {
    console.log(event.target.myObject);
}

<li v-for="o in objects" v-on:click="click" v-bind:data-myObject="o"></li>

and then getting the object using event.target.getAttribute("data-myObject") yields a string, not object.

I can make this work using an index, and then lookup the object from this.$data.objects[index]. This seems backward to me, as I expect some way of binding o instance to the target generated <li> element.

How to do this?

Niklesh Raut · Accepted Answer · 2018-02-03 12:09:09Z

3

You need to pass object in calling function as in below example

var app = new Vue({
  el:'#app',
  data:{
    myObj: [
      { derp: 1 },
      { derp: 2 },
    ],
    output:''
  },
  methods:{
    myFunc: function(obj){
      this.output = obj;
      console.log(obj);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="o in myObj" v-on:click="myFunc(o)">{{o.derp}}</li>
  </ul>
  {{output}}
</div>

answered Feb 3, 2018 at 12:09

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

1 Comment

Ruudjah Over a year ago

Thanks! That's it :)

Collectives™ on Stack Overflow

Bind object to element attribute in vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related