Vue.js疑问：this.$refs.变量返回undefined，直接用值却正常？

这是因为你搞错了JavaScript对象属性的访问方式：

• this.$refs.anchor里的anchor是固定属性名，Vue会直接去$refs对象里找名为anchor的属性，但你的模板里根本没有ref="anchor"的元素，所以返回undefined。
• 你传入的参数anchor是一个变量，值为字符串"whoAreWe"，要通过变量名访问对象属性，必须用方括号语法：this.$refs[anchor]。这种写法会先解析变量anchor的值，再去$refs里找对应名称的属性，也就是等价于this.$refs['whoAreWe']，和你直接写this.$refs.whoAreWe效果一致，所以能正确拿到DOM元素。

修正后的方法代码应该是这样：

scrollTo: function(anchor) {
  console.log(anchor); // "whoAreWe"
  console.log(this.$refs[anchor]); // 能拿到对应的DOM元素
  console.log(this.$refs.whoAreWe); //the DOM div "whoAreWe"
}

内容的提问来源于stack exchange，提问作者LNFullStack