Tengo un conjunto de datos que deben recorrerse en bucle, pero cada elemento de esos datos tiene un evento onClick diferente. Algo a lo largo de las líneas como:
list: [ { text: 'a', icon: 'a-icon', onClick: () => { // do stuff a }, }, { text: '`b`', icon: 'b-icon', onClick: () => { // do stuff b }, }, ]lo que inicialmente traté de hacer fue:
<div v-for="(item, i) in list" :key="i" @click="item.onClick()"></div>que no funcionó. el error fue:
TypeError: item.onClick is not a functionEntonces probé:
<div v-for="(item, i) in list" :key="i" @click="list[i].onClick()"></div> que se ve raro pero funciona. Solo que no puedo acceder a this dentro de la función onClick . Podría simplemente pasar this a la función directamente como @click="list[i].onClick(this)" pero también se ve raro.
Sé que puedo escribir un método y switch según el índice. Pero luego tuve que escribir la función onClick por separado.
¿Hay una mejor manera de hacer esto?
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> Depende de lo que quieras decir con this . ¿Es this el elemento HTML con el que está trabajando o el elemento de matriz que se está repitiendo?
<div v-for="(item, i) in list" :key="i" @click="item.onClick(item)"></div> //If `this` refers to the array element being looped Si this se refiere al elemento HTML en ese ciclo: puede asignar una id única, probablemente :id="'item_list'+id" y luego pasarla como parámetro de método en vivo arriba. Luego seleccione el elemento dentro del método. Definitivamente hay una mejor manera, pero hasta ahora eso es lo que se me ocurre.
Y además, dado que está utilizando la función de flecha, puede apuntar a su elemento principal más cercano que tenga this archivo . Intente usar la función anónima si se adapta a sus necesidades.