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


VueJS template ref undefined with multiple divs?

我有一个简单的 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
<template>
        COOL!
        I am new
</template>

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

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

中

1
2
3
4
5
6
<template>
 
    COOL!
     I am new
 
</template>

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