我可以在 HTML 数据中保留 Vuejs 事件吗？

Question

我想让 Vue 事件与响应 html 数据一起工作。

1/描述：

• 在<template><div id="id_1" v-on:click="method(value)">TEXT</div></template> 中：单击此按钮即可使用。

• 现在当我有 html 数据替换 id_1 中的内容时，例如：

  var data = "<div id='id_1'>TEXT 2</div>"; $('#id_1').html(data );

我的代码如下：axios -> socket.on -> append or html with event like above.

2/ 问题：我无法将 v-on:click 放入这样的数据中：

<div v-on:click="method(value)" id='id_1'>TEXT 2</div> 。

3/ 到目前为止的替代方案：我必须在 Jquery 中创建不同的功能。这意味着一个 vue 文件中有两种方式。它以这种方式工作。有什么办法可以将 vue 事件放入上述数据中？

提前致谢， 广川

Answer 1

我认为您不需要替换整个 HTML。 只需制作一个像这样的模型：

data() {
  return {
    text: ''
  }
}

然后处于挂载状态或其他取决于您的情况：

mounted() {
  let vm = this;
  vm.text = 'test123';
}

在你的 HTML 中使用这个：

<template><div id="id_1" v-on:click="method(value)">{{text}}</div></template>

希望对你有帮助:)