我正在尝试动态创建一些html内容，并将vue组件方法绑定到元素上的事件。但是这不起作用。下面是对该问题的描述和带有测试用例的代码片段。
重现问题的步骤
单击“单击我1”
观察控制台。
单击“切换弹出窗口”获取工具提示。
单击“单击我2”
观察控制台。
预期行为
在步骤2中，您应该在控制台中看到“您应该在控制台中看到这个”。在步骤5中，您应该再次看到“您应该在控制台中看到这个”。
实际行为
在步骤2中，“您应该在控制台中看到这个”出现在控制台中。在步骤5中，“您应该在控制台中看到这个”不会出现在控制台中。
new Vue({
el: '#app',
methods: {
expectToSucceed() {
console.log('you should see this in the console');
},
},
created() {
$(document).ready(() => {
const mockedDynamicHtml = `
<div class="popover">
<h1>Example tooltip</h1>
<button @click="expectToSucceed" class="remove">Click me 2</button>
</div>
`;
$('[data-toggle="popover"]').popover({
html: true,
template: mockedDynamicHtml,
});
});
},
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title></title>
</head>
<body>
<div id="app">
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover for tooltip</a>
<br><br>
<p><span @click="expectToSucceed">Click me 1</span></p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>最佳答案
它将是@click，如下所示：
<i @click="test"></i>
因为v-on的简写是
@而不是:。