javascript - 在 v-for 循环中调用不同的 onClick 函数

Question

我有一组数据需要循环，但该数据中的每一项都有不同的 onClick 事件。类似这样的内容:

list: [
  {
    text: 'a',
    icon: 'a-icon',
    onClick: () => {
      // do stuff a
    },
  },
  {
    text: '`b`',
    icon: 'b-icon',
    onClick: () => {
      // do stuff b
    },
  },
]

我最初尝试做的是:

<div v-for="(item, i) in list" :key="i" @click="item.onClick()"></div>

这没有用。错误是:

TypeError: item.onClick is not a function

然后我尝试了:

<div v-for="(item, i) in list" :key="i" @click="list[i].onClick()"></div>

这看起来很奇怪但有效。只有我无法在 onClick 函数中访问 this 。我可以像 @click="list[i].onClick(this)" 一样直接将 this 传递给函数，但它看起来也很奇怪。

我知道我可以写一个方法，根据索引做switch。但后来我不得不单独编写 onClick 函数。

有更好的方法吗？

Answer 1

const app = new Vue({
  el: "#app",
  data() {
    return {
      list: [{
          text: 'a',
          icon: 'a-icon',
          onClick: (item) => {
            let element = document.getElementById(item.text);
            console.log(element);
            console.log("Item" + item);
            console.log("Hi")
          },
        },
        {
          text: '`b`',
          icon: 'b-icon',
          onClick: (item) => {
            console.log("Item" + item);
            console.log("Hello")
          },
        },
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, i) in list" :key="i" :id="item.text" @click="item.onClick(item)">{{item.text}}</div>
</div>

这取决于您所说的this 是什么意思。 this 是您正在使用的 HTML 元素，还是正在循环的数组元素。

<div v-for="(item, i) in list" :key="i" @click="item.onClick(item)"></div> //If `this` refers to the array element being looped

如果 this 引用该循环中的 HTML 元素:您可以分配一个唯一的 id，可能是 :id="'item_list'+id" 然后将其作为上面的方法参数传递。然后选择方法中的元素。肯定有更好的方法，但到目前为止，这就是我能想到的

此外，由于您使用的是箭头函数，它可能指向最近的具有 this 的父级。如果适合您的需要，请尝试使用匿名函数。