I have been working around a span that is generated by Vue´s (version 2.2) method, and my problem is that, when the span is created, the method inside onclick is automatically launched. So, I'm looking for a way to avoid this behaviour and make this span only clickable by the user.
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;
}
This above methods, calls this other one.
changeLikeProperty(colName, rowData) {
if (rowData.isLike) {
this.unmarkAsLike(rowData);
} else {
this.markAsLike(rowData);
}
}
I tried with .prevent() after onclick, but really I'm not sure why this behaviour happens. Thanks in advance!!
That's because you actually run the function while generating the string for your span. And you bind to onclick the result of that function, not the function itself.
Wrap it withing an anonymous function and you're good!
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;
}
Note: I'm not sure why you create your elements like this, I'm pretty sure there is a better way to do (using dynamic bindings on a vue template or a render function)