He estado trabajando con un intervalo generado por el método de Vue (versión 2.2), y mi problema es que, cuando se crea el intervalo, el método dentro de onclick se inicia automáticamente. Por lo tanto, estoy buscando una manera de evitar este comportamiento y hacer que el usuario solo pueda hacer clic en este intervalo.
fnLikeIcon(colName, rowData) { let currentStatus = ''; if (rowData.isLike) { currentStatus = `<span class="mdi mdi-ok" onclick=${this.changeFavouriteProperty(colName, rowData)}"></span>`; } else { currentStatus = `<span class="mdi mdi-outline" onclick=${this.changeLikeProperty(colName, rowData)}"></span>`; } return currentStatus; }Este método anterior, llama a este otro.
changeLikeProperty(colName, rowData) { if (rowData.isLike) { this.unmarkAsLike(rowData); } else { this.markAsLike(rowData); } }Probé con .prevent() después de hacer clic, pero realmente no estoy seguro de por qué sucede este comportamiento. ¡¡Gracias por adelantado!!
Eso es porque en realidad ejecuta la función mientras genera la cadena para su lapso. Y te onclick a hacer clic en el resultado de esa función, no en la función en sí. ¡Envuélvelo con una función anónima y estarás bien!
fnLikeIcon(colName, rowData) { let currentStatus = ''; if (rowData.isLike) { currentStatus = `<span class="mdi mdi-ok" onclick=${() => this.changeFavouriteProperty(colName, rowData)}"></span>`; } else { currentStatus = `<span class="mdi mdi-outline" onclick=${() => this.changeLikeProperty(colName, rowData)}"></span>`; } return currentStatus; }Nota: no estoy seguro de por qué crea sus elementos de esta manera, estoy bastante seguro de que hay una mejor manera de hacerlo (usando enlaces dinámicos en una plantilla vue o una función de renderizado)