VueJS模板ref未定义多个div?

时间:2018-02-04 11:23:10

标签: javascript vue.js

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

val function: (String) -> A = { A(it) } // uses the default for `y`

现在奇怪的事情:我在我的模板中添加了另一个元素,无论哪一个......例如。一个新的div:

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

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

1 个答案:

答案 0 :(得分:2)

Vue要求你有一个顶级元素,所以你需要将整个事物包裹在div中:

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

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