I have encountered a peculiar task. My goal is to add an additional functionality to an element when it is clicked. However, I am unable to activate the addScroll function located within my methods. The intended behavior is for the div to be appended to the screen upon clicking the button. Furthermore, after clicking on the appended div, the remove method should be triggered along with the desired addition of addScrollBack().
new Vue({
el: "#app",
data: {
chocs: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
},
methods: {
addScrollBack: function(){
alert("test");
},
handlePosterClick: function(choc){
alert("clicked")
window.top.$(".2l-body").css("overflow","hidden");
$("#cook").append(`<div style="background-color:blue;height:200px; width:300px" onclick="document.querySelector('#popover-div').remove();addScrollBack();">test</div>`);
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="cook">
</div>
<button v-on:click="handlePosterClick(choc)">
Book
</button>
</div>