v-on:click在innerHTML后失效

v-on:click在innerHTML中失效，点击没有反应。
原本是想写一个删除按钮，但是按钮的图片是在js里拼的，如图，本人不是纯前端，所以不知道这么写有什么问题，总之就是不报错，也没反应

你好，本人也纯前端，vue不支持字符串形式的v-on:click；
你可以使用列表渲染的方式进行修改

<img v-for="item in list" :key="item.id" :src="item.src" @click="del()" />

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  这种情况下，v-on:click绑定的事件失效了，可能是因为在使用innerHTML动态添加元素后，原来的DOM节点被清空，新添加的节点没有被vue实例所管理，导致绑定的事件失效。解决方法如下：

  1. 使用vue的动态组件，将需要动态添加的DOM节点封装成组件，在父组件中动态引入该组件。这样vue能够正确的管理组件并绑定事件。

  2. 如果不想使用动态组件，可以使用vue提供的$forceUpdate()方法强制更新视图。在动态添加元素后调用$forceUpdate()方法，强制更新视图，可以让新添加的节点被vue实例所管理并绑定事件。

  示例代码如下：

  1. 使用动态组件

  在父组件中动态引入子组件：

  
  

  添加节点

  子组件中定义自己的样式和行为逻辑，这里假设Node1和Node2组件分别表示不同类型的节点。

  1. 使用$forceUpdate()方法

  在添加节点后调用$forceUpdate()方法，强制更新视图：

  添加节点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^