将对象绑定到 vue.js 中的元素属性答案

【问题标题】：Bind object to element attribute in vue.js将对象绑定到 vue.js 中的元素属性
【发布时间】：2018-07-13 19:22:46
【问题描述】：

考虑

<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> 元素。

如何做到这一点？

【问题讨论】：

标签： javascript binding vue.js

【解决方案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>

【讨论】：

谢谢！就是这样:)