关于 javascript:VueJS 模板引用未定义多个 div？

织梦狗教程前端开发

2022-09-16

VueJS template ref undefined with multiple divs?我有一个简单的 vue 组件，我尝试从模板中获取 DOM 元素。这是组件，它工作正常：[cc lang=javascript] ...

我有一个简单的 vue 组件，我尝试从模板中获取 DOM 元素。这是组件，它工作正常：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
COOL!
</template>

export default {
data() {
return {
blabla: 1
}
},
mounted() {
console.log("MOUNTED:");
var cool = this.$refs.cool;
console.log(cool); //works!
}
}

现在奇怪的是：我在模板中添加了另一个元素，不管是哪个元素......例如。一个新的 div:

1
2
3
4

现在mounted()中的console.log返回undefined。

Vue 要求您拥有一个顶级元素，因此您需要将整个元素package在 div:

中

1
2
3
4
5
6

这里是 JSFiddle：https://jsfiddle.net/nrtkr6cL/

mvvm 数据处理

织梦狗教程

本文标题为：关于 javascript:VueJS 模板引用未定义多个 div？

上一篇：关于 javascript：如何在页面加载时调用 vue.js 函数

下一篇：关于 vuejs2:\\”TypeError: Cannot read property \\

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX