Vue组件方法不在动态HTML中的事件上运行 [英] Vue component method not being run on event in dynamic HTML
问题描述
我正在尝试动态创建一些HTML内容，并将Vue组件方法绑定到元素上的事件。但是这不行。以下是问题的描述和带有测试用例的代码段。
重现问题的步骤
- 点击点击我1
- 观察控制台。
- 点击切换popover工具提示。
- 点击点击我2
- 观察控制台。
预期行为
在步骤2中，您应该会看到你应该在控制台中看到在控制台。在步骤5中，您应该看到您应该在控制台中看到。
实际行为
在步骤2中，您应该在控制台中看到显示在控制台中。在步骤5中，您应该在控制台中看到这个不会出现在控制台中。
new Vue（{el：'#app'，methods：{expectToSucceed（）{console.log（'you should see this in the console'）;}，}， （）{$（document）.ready（（）=> {const mockedDynamicHtml =`< div class =popover>< h1>示例tooltip< / h1>< button @ click =expectToSucceed =remove>点击我2< / button>< / div>`; $（'[data-toggle =popover]'）popover（{html：true，template：mockedDynamicHtml，}）;} ）;}，}）;
<！DOCTYPE html> ;< HTML> < HEAD> < meta charset =utf-8> < meta name =viewportcontent =width = device-width> < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet> <标题>< /标题> < /头> <身体GT; < div id =app> < a href =＃data-toggle =popovertitle =Popover Headerdata-content =popover内的一些内容>切换用于工具提示的弹出窗口< / a> <峰; br><峰; br> < p>< span @ click =expectToSucceed>点击我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 是 @ 不是： / p>
I am attempting to dynamically create some HTML content and bind a Vue component method to an event on the element. However this does not work. Below is a description of the problem and a snippet with a test case.
Steps to reproduce problem
- Click Click me 1
- Observe the console.
- Click Toggle popover for tooltip.
- Click Click me 2
- Observe the console.
Expected behaviour
In Step 2 you should see "you should see this in the console" in the console. In Step 5 you should see "you should see this in the console" again.
Actual behaviour
In Step 2, "you should see this in the console" appears in the console. In Step 5, "you should see this in the console" does not appear in the console.
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>
It will be @click, like this:
<i @click="test"></i>
as shorthand of v-on is @ not :.
这篇关于Vue组件方法不在动态HTML中的事件上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
