VueJS模板引用未定义多个div？答案

【问题标题】：VueJS template ref undefined with multiple divs?VueJS模板引用未定义多个div？
【发布时间】：2018-07-14 10:06:36
【问题描述】：

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

<template>
        <div ref="cool">COOL!</div>
</template>

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

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

<template>
        <div ref="cool">COOL!</div>
        <div>I am new</div>
</template>

现在mounted() 中的console.log 返回未定义。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

Vue 要求您拥有一个顶级元素，因此您需要将整个内容包装在 div 中：

<template>
  <div>
    <div ref="cool">COOL!</div>
     <div>I am new</div>
  </div>
</template>

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

【讨论】：