vue.runtime.esm.js:4605 [Vue warn]: Error in v-on handler: "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."
时间: 2024-02-17 15:01:38 浏览: 121
vue.js+node.js 实战项目视频及源码
这个错误是因为你调用了 `appendChild` 方法,但是传递给它的参数不是一个 DOM 节点。 `appendChild` 方法的参数必须是一个 DOM 节点,而不能是一个简单的字符串或其他数据类型。
通常情况下,我们使用 `document.createElement` 方法来创建一个 DOM 节点,然后再将它插入到页面中。例如:
```javascript
mounted() {
const myDiv = this.$refs.myDiv;
const mySpan = document.createElement('span');
mySpan.textContent = 'Hello, world!';
myDiv.appendChild(mySpan);
}
```
在这个例子中,首先使用 `document.createElement` 方法创建一个 `span` 元素,然后将它的文本内容设置为 `'Hello, world!'`,最后将它插入到 `myDiv` 元素中。
需要注意的是,如果你想将一个简单的字符串插入到 DOM 中,你可以将它包装在一个 `TextNode` 对象中,然后将这个对象插入到页面中。例如:
```javascript
mounted() {
const myDiv = this.$refs.myDiv;
const myText = document.createTextNode('Hello, world!');
myDiv.appendChild(myText);
}
```
在这个例子中,使用 `document.createTextNode` 方法创建一个包含 `'Hello, world!'` 文本的 `TextNode` 对象,然后将它插入到 `myDiv` 元素中。
阅读全文