使用setAttribute在VueJS中切换@click

Question

我想知道是否可以使用setAttribute在VueJS中切换@click。

setAttribute("@click", 'delete')

[每当我这样做时，我都会例外。

DOMException: Failed to execute 'setAttribute' on 'Element': '@click' is not a valid attribute name

所以，如果那不可能，我可以用其他方式做到吗？

提前感谢。

Answer 1

为了进一步阐述我的评论，从这种意义上讲，不可能直接修改呈现的HTML，因为VueJS实际上是在运行时编译模板，而@click属性实际上在内部被解析为click事件处理程序。

您应该做的是简单地将@click包含在模板本身中，然后在调用该方法时，可以在其中添加一个保护子句，如果不满足特定条件，该保护子句将不会执行任何操作，即

<!-- Template -->
<button @click="delete"></button>

...在您的JS文件中：

methods: {
  delete() {
    // Guard clause
    if (condition) {
      return;
    }

    // Otherwise, proceed with deletion
  }
}

condition将是组件数据的一部分，您可以根据要防止的条件动态更新它们。默认的组件数据将为{ condition: false }，然后您可以在满足特定条件时（即，调用/调用FullCalendar的this.condition = true时）简单地更新eventRender。