VueJS：使用 v-html 来 appendChild 不起作用，为什么？

Question

在这个简单的codesandbox demo 中，HTML 元素存储在一个数据数组中，v-html 绑定到一个 div 以将这些元素呈现为该 div 的子元素。但它不起作用，当添加新元素时，元素不会被渲染，而是显示[object HTMLParagraphElement]。

应用程序.vue

<template>
  <div id="app">
    <child />
  </div>
</template>

<script>
import child from "./components/child";

export default {
  name: "App",
  components: {
    child
  }
};
</script>

孩子.vue

<template>
  <div>
    <button @click="addNewEl">Add New Element</button>
    <div v-for="el in elList" v-html="el"></div>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      elList: []
    };
  },
  methods: {
    addNewEl() {
      var para = document.createElement("P"); // Create a <p> node
      var t = document.createTextNode("This is a paragraph."); // Create a text node
      para.appendChild(t); // Append the text to <p>
      this.elList.push(para);
    }
  },
  created() {
    this.addNewEl();
  }
};
</script>

谁能告诉我我做错了什么，并展示将孩子附加到父母身上的正确 Vue 方式。

谢谢。

Answer 1

在 Vue 中直接向 DOM 添加元素不是必需的，而且是非常糟糕的做法。这是“Vue方式”的做法：

<template>
  <div>
    <button @click="addNewPara">Add New Para</button>
    <div>
     <p v-for="(p, index) in para" :key="index">{{ p }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      para: ['This is a paragraph 1', 'This is a paragraph 2'],      
    };
  },
  methods: {
    addNewPara() {
      this.para.push(`This is a paragraph ${this.para.length + 1}`)
    }
  }
};
</script>

Answer 2

您可以使用以下方法修改方法：

addNewEl() {
  this.elList.push("<p>This is a paragraph.</p>");
}

Answer 3

由于v-html 期望将字符串解析为 HTML，因此在以编程方式呈现 HTML 元素时不能使用此指令。

改用元素的outerHTML 属性。 Reference

<template>
  <div>
    <button @click="addNewEl">Add New Element</button>
    <div v-for="el in elList" v-html="el.outerHTML"></div>
  </div>
</template>