javascript - 在 vue.js 中将对象绑定(bind)到元素属性

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] 查找对象。这对我来说似乎是落后的，因为我期望某种绑定(bind)方式 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>