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>

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

1 个答案: