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

【问题标题】：VUE - Why isn't this DOM element being created in VUE?VUE - 为什么不在 VUE 中创建这个 DOM 元素？
【发布时间】：2021-05-17 20:29:33
【问题描述】：

问题：以下脚本创建了一个 div，并且应该附加到另一个 div。我正在尝试在此组件中实现 vanilla javascript。如何创建这个 DOM 元素？

这是组件：

<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)

  }
}

【问题讨论】：

<template> 的内容不会被解析为 DOM 的一部分；它变成了一个单独的文档片段。因此，您无法以这种方式从模板中找到“元素”。 Documentation

标签： javascript vue.js dom methods createelement

【解决方案1】：

它不起作用，因为您正在尝试插入函数定义。

如果您想在点击时附加一个新的 div，请在您的 modal 组件中创建一个本地化状态。单击时切换该状态并使用v-if 指令动态附加该div

   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;
        }
      }
    }

在您的模板中

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

当showContent 的值发生变化时，vue 将相应地删除或附加它所附加的带有v-if 属性的子树。

【讨论】：

我也认为@click="closeModal" 没有触发预期的 createDiv 方法可能是个问题？