{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 不美不萌又怎样 的问题《Vue component method not being run on event in dyn》','https://www.manongdao.com/q-836997.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:as shorthand of v-on is
@not:.