[Vuejs]-Append div with additional functon

by

0👍

✅

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.

0👍

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>

Leave a comment