Vue中mounted函数内无法访问$refs问题求助

问题代码 #

模板代码 #

<apex-chart v-if="followers_options" ref="chart1" height="160" type="area" :options="followers_options"
            :series="followers_series"></apex-chart>

脚本代码 #

export default {
    components: {
        app: appLayout,
        auth: authLayout,
    },
    mounted: function () {
        this.uChart()
    },
    methods: {
        uChart: function() {
                const store = useStore();
                let weight_series = [];
                store
                    .dispatch("getWeights")
                    .then((data) => {                        
                    for (var j = 0; j < data.table.length; j++){     
                        weight_series.push(data.table[j].weight);  
                    }
                    console.log(this.$refs.chart1);
                    this.$refs.chart1.updateSeries([{ name: 'Weight', data: weight_series }]);
                    })
                    .catch((error) => {
                        console.log(error);
                    });
        }
    }
};

问题现象 #

控制台打印this.$refs.chart1为undefined，调用updateSeries时触发报错；尝试使用普通input标签的ref也无法获取到元素。

解决方案 #

1. 处理v-if的渲染时机问题 #

模板中使用了v-if="followers_options"，当mounted钩子执行时，followers_options可能还未初始化，导致<apex-chart>组件还未被渲染，因此ref="chart1"无法被捕获到。

• 方案一：将v-if替换为v-show，v-show会始终渲染组件只是控制显示隐藏，确保ref能被正常获取：

<apex-chart v-show="followers_options" ref="chart1" height="160" type="area" :options="followers_options"
            :series="followers_series"></apex-chart>

• 方案二：通过watch监听followers_options的变化，当它有值时再调用uChart方法：

export default {
    components: {
        app: appLayout,
        auth: authLayout,
    },
    watch: {
        followers_options(newVal) {
            if (newVal) {
                this.uChart();
            }
        }
    },
    methods: {
        // ... 其他方法不变
    }
};

2. 修正组合式API与选项式API的混用问题 #

你的组件使用选项式API写法，但在uChart方法中调用了组合式API的useStore()，这会导致上下文异常，进而影响ref的获取。在选项式API中应该使用this.$store来访问Vuex store：

uChart: function() {
        let weight_series = [];
        this.$store
            .dispatch("getWeights")
            .then((data) => {                        
            for (var j = 0; j < data.table.length; j++){     
                weight_series.push(data.table[j].weight);  
            }
            if (this.$refs.chart1) {
                this.$refs.chart1.updateSeries([{ name: 'Weight', data: weight_series }]);
            }
            })
            .catch((error) => {
                console.log(error);
            });
}

3. 增加安全判断 #

在调用updateSeries前，先判断this.$refs.chart1是否存在，避免触发报错：

if (this.$refs.chart1) {
    this.$refs.chart1.updateSeries([{ name: 'Weight', data: weight_series }]);
}

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