[Vuejs]-VUE – Why isn't this DOM element being created in VUE?

by

0👍

It doesn’t work because you are trying to interpolate a function definition.

If you want to append a new div on click, create a localized state in your modal component. Toggle that state on click and use v-if directive to append that div dynamically

   export default {
      // vue component state
      data: function () { 
       return {
         showContent: false // we'll use this to show/hide the dynamic div
       }
      }, 

      props: [],

      methods: {
        /**
        * update state on click
        **/
        createDiv(){
         this.showContent = !this.showContent;
        }
      }
    }

In your template

 <template>
  <div class="backdrop" @click="closeModal">
    <div class="modal">
      <div id="elementContainer">
        <div v-if="showContent>
           ...
        </div>
      </div>
    </div>
  </div>
 </template>

When showContent value is changed, vue will accordingly remove or append the subtree in which it attached with a v-if attribute.

Leave a comment