VUE - 为什么不在 VUE 中创建这个 DOM 元素？

Question

Question: The following script creates a div, and is supposed to be append to another div. I am trying to implement vanilla javascript within this component. How can I create this DOM element?

Here is the component:

<template>
<div class="backdrop" @click="closeModal">
    <div class="modal">
        <div id="elementContainer">{{ createDiv }}</div>
    </div>
</div>

<script>
    export default {

    props: [ 'elementSummary', 'elementName', 'elementSymbol', 'elementNumber', 'elementPhase', 
'elementShell', 'elementDensity' ],
    methods: {
     createDiv(){
        
        const newDiv = document.createElement('div')
        let divContainer = document.getElementById("elementContainer").appenedChild(newDiv)

  }
}

Answer 1

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.