Vue中v-if控制组件的$refs返回undefined问题排查求助

核心错误原因 #

你的代码存在两个关键问题，导致无法正确获取组件的$refs：

1. ref绑定语法错误 #

模板中给组件使用了:ref="leaders"和:ref="opportunities"，带冒号的:ref是响应式变量绑定，但你的data里并没有定义leaders、opportunities这两个变量，Vue会将它们识别为undefined，因此不会给组件注册对应的ref名称。

正确写法是直接使用字符串形式的ref（不带冒号）：

<LeadsResults v-if="reporting.type == 'yes'" ref="leaders"></LeadsResults>
<OpportunitiesResults v-if="reporting.type == 'no'" ref="opportunities"></OpportunitiesResults>

2. 异步DOM更新导致的时机问题 #

Vue修改数据后，DOM更新是异步执行的。当reporting.type变化时，watch回调会立即触发，但此时对应的组件还未完成渲染挂载，$refs自然无法获取到组件实例。

解决方法是使用this.$nextTick()，等待DOM更新完成后再访问ref：

watch: {
  'reporting.type': function (value) {
    this.$nextTick(() => {
      if (value == 'yes') {
        console.log(this.$refs.leaders)
      } else if (value == 'no') {
        console.log(this.$refs.opportunities)
      }
    })
  }
}

完整修复代码 #

<template>
  <div>
    <v-card>
      <v-form :model='reporting' ref='reportingForm'>
        <v-radio-group v-model="reporting.type"
                        :mandatory="true"
                        class="referral-radios">
          <v-radio label="True" :value="'yes'" class="referral-radio"></v-radio>
          <v-radio label='False' :value="'no'" class="referral-radio"></v-radio>
        </v-radio-group>
      </v-form>
    </v-card>
    <div>
      <LeadsResults v-if="reporting.type == 'yes'" ref="leaders"></LeadsResults>
      <OpportunitiesResults v-if="reporting.type == 'no'" ref="opportunities"></OpportunitiesResults>
    </div>
  </div>
</template>

<script>
import LeadsResults from 'views/leads_results.vue'
import OpportunitiesResults from 'views/opportunities_results.vue'
export default {
  components: {
    LeadsResults,
    OpportunitiesResults,
  },
  data () {
    return {
      reporting: {
        type: ''
      }
    }
  },
  watch: {
    'reporting.type': function (value) {
      this.$nextTick(() => {
        if (value == 'yes') {
          console.log(this.$refs.leaders)
        } else if (value == 'no') {
          console.log(this.$refs.opportunities)
        }
      })
    }
  }
};
</script>

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