Question

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

应用程序

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

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

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

小孩

<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

由于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>

Answer 2

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

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

Answer 3

没有必要将元素直接添加到DOM中，这是在Vue中做事的真正糟糕的方法。这是通过“ 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>

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

3 个答案: