將對象綁定到vue.js中的element屬性

Question

考慮

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

像這樣的物體

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

在我的click()函數中，我想訪問o實例。

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

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

然后使用event.target.getAttribute("data-myObject")獲取對象會產生一個string ，而不是object 。

我可以使用索引來完成這項工作，然后從this.$data.objects[index]查找對象。 對我來說，這似乎是倒退，因為我期望將o實例綁定到目標生成的<li>元素的某種方式。

這個怎么做？

Answer 1

您需要在調用函數中傳遞對象，如下例所示

 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>