append div with additional functon-CodePudding

I have an odd task. I am simply trying to add an additonal function on an element when its clicked. I cant seem to trigger the addScroll function that is found within my methods. As you can see, the div should be appended to the screen when the button is clicked. Once that div is clicked as well, the remove method is applied and I also want to apply the 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>

CodePudding user response：

Not clear, but suggestion is use v-html instead of 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>

CodePudding user response：

Look at this :

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){
    },
  }
})

...Instead of manipulating the dom yourself, just use vue's template, with a model controlling its behavior. The same applies to your other component (the popup) : it should instead listen on a custom event on this component to add/remove scroll using reactivity.

Using vanilla javascript for dom modification, event-handling etc. is NOT recommended with vue. Always use vue's way of doing it. vanilla dom modification should only be done by experts, mostly to interface with non-vue code.