如何处理Vue渲染时出现的Cannot read property 'choice' of undefined错误

嘿，我来帮你搞定这个问题！从你给出的代码和报错信息来看，问题出在两个地方：一是判断时机不对，二是事件绑定的写法可能有问题。

先拆解下报错原因：你看到的TypeError: Cannot read property 'choice' of undefined，说明**this.$refs['groupName']本身就是undefined**，这时候直接去访问它的choice属性自然会报错——你之前的判断都是在检查choice是不是undefined，但根本没先确认$refs['groupName']是否存在，这就像还没找到抽屉，就想拉开抽屉拿东西一样。

下面给你几个具体的解决办法：

1. 先确认$refs存在，再访问属性 #

修改你的gotoGroups方法，先判断this.$refs['groupName']是否存在，再去检查它的choice属性：

gotoGroups() {
  // 先确保引用存在，再判断属性
  if (this.$refs['groupName'] && this.$refs['groupName'].choice !== undefined) {
    // 这里写你的业务逻辑
  }
}

如果你用的是Vue 3，或者Vue 2配合了Babel转译，还可以用更简洁的可选链操作符，它会自动处理undefined的情况：

gotoGroups() {
  if (this.$refs['groupName']?.choice !== undefined) {
    // 业务逻辑
  }
}

2. 确保组件渲染完成后再访问$refs #

$refs是在组件渲染完成后才会被Vue赋值的，如果你的<data-list>是动态渲染的（比如用v-if控制显示/隐藏），或者你在组件还没挂载完成时就调用了gotoGroups，那$refs肯定是undefined。这时候可以：

• 如果是页面加载时调用，把方法放在mounted钩子中；
• 如果是动态更新后调用，用$nextTick等待DOM更新完成：

gotoGroups() {
  this.$nextTick(() => {
    if (this.$refs['groupName']?.choice !== undefined) {
      // 业务逻辑
    }
  })
}

3. 修正事件绑定的写法 #

还有个容易被忽略的点：你写的:change="gotoGroups()"会立即执行gotoGroups方法，而不是把它作为change事件的回调函数。也就是说，组件一渲染，这个方法就跑了一遍，这时候$refs大概率还没初始化，直接就报错了。

正确的绑定方式应该去掉括号，这样方法只会在change事件触发时执行：

<data-list label='Group Name: ' :change="gotoGroups"></data-list>

如果需要给方法传递参数，可以写成箭头函数的形式：:change="() => gotoGroups(你的参数)"

按照上面的步骤调整后，应该就能解决这个报错了。

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