Tengo una tarea extraña. Simplemente estoy tratando de agregar una función adicional en un elemento cuando se hace clic. Parece que no puedo activar la función addScroll que se encuentra dentro de mis métodos. Como puede ver, el div debe agregarse a la pantalla cuando se hace clic en el botón. Una vez que también se hace clic en ese div, se aplica el método de eliminación y también quiero aplicar 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("ckciked") 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>No está claro, pero la sugerencia es usar v-html en lugar de append
new Vue({ el: "#app", data: { cook: "Old content OR blank", 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("ckciked " + choc) // window.top.$(".2l-body").css("overflow","hidden"); // inline Scripting not recommanded, this.cook= `<div style="background-color:blue;height:200px; width:300px" >test</div>`; }, } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div id="cook" v-html="cook"> </div> <button v-on:click="handlePosterClick('choc')"> Book </button> </div>Mira este :
https://codepen.io/hl037/pen/QWOjwyK
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> {{displayDiv}} <div id="cook"> <div v-if="displayDiv" style="background-color:blue;height:200px; width:300px" v-on:click="onDivClicked" > test </div> </div> <button v-on:click="displayDiv=true"> Book </button> </div> new Vue({ el: "#app", data: { displayDiv:false, 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: { onDivClicked(){ /*document.querySelector('#popoverdiv').remove();*/ this.addScrollBack(); }, addScrollBack: function(){ alert("test"); }, handlePosterClick: function(choc){ }, } })... En lugar de manipular el dom usted mismo, simplemente use la plantilla de vue, con un modelo controlando su comportamiento. Lo mismo se aplica a su otro componente (la ventana emergente): en su lugar, debería escuchar un evento personalizado en este componente para agregar/eliminar el desplazamiento usando la reactividad.
NO se recomienda el uso de javascript de vainilla para la modificación de dom, el manejo de eventos, etc. con vue. Siempre use la forma de hacerlo de vue. La modificación de vanilla dom solo debe ser realizada por expertos, principalmente para interactuar con código que no es vue.