我有一个简单的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。
答案 0 :(得分:2)
Vue要求你有一个顶级元素,所以你需要将整个事物包裹在div
中:
<template>
<div>
<div ref="cool">COOL!</div>
<div>I am new</div>
</div>
</template>
这里是JSFiddle:https://jsfiddle.net/nrtkr6cL/