0
誰もVueJSで追加された動的要素をクリック可能にする方法を提案できますか？追加された要素のVueJS onclick
ツールチップボタンがvuejs popAlertメソッドをトリガーしていません。
const myVue = new Vue({
el: '#vue',
methods: {
popAlert: function() {
alert('clicked');
}
}
});
$(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-10-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-10-01'
},
{
title: 'Long Event',
start: '2017-10-07',
end: '2017-10-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-10-09T16:00:00'
},
],
eventRender: function(event, element, view) {
let htmlText = `<div class="ui tooltip">
<h3>Tooltip title</h3>
<button type="button" class="ui mini button" @click="popAlert">Delete</button>
</div>`;
$(element).popup({
inline: false,
on: 'click',
exclusive: true,
hoverable: true,
html: htmlText,
context: '#vue',
});
}
});
});
https://codepen.io/tonoslfc/full/bomqWR/
のための私のペンで
ルックは、Vueがjqueryので追加されたテンプレートをコンパイルdoes'nt。このVueプラグインを代わりに使用してみてください：https://github.com/Wanderxx/vue-fullcalendar – Tomer
@fatmanカレンダーはうまく動作します。 'popup'の意味的なツールチップの「削除」ボタンが' popAlert'メソッドを呼び出しています – tonoslfx
もちろん、jqueryでテンプレートを追加するので、Vueはコンパイルしないので、代わりにVueプラグインを使用します。一般的には、Jqueryとvueの混在を避けるようにしてください。通常は、Vue固有のプラグインがJqueryプラグインに一致します。 – Tomer