将对象绑定到vue.js中的element属性

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?

Answer 1

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>