vue.js - 在 Vue.js 中使用计算并且在调用挂载时计算的属性仍然是空的

Question

我是新手Vue.js。我正在开发一个组件，当客户出现时（没有更多客户在他们前面），它会在视频聊天中自动连接客户和销售代表。我需要通过调用函数来激活第 3 方视频聊天软件startMyVisit()。

Error: visit argument is not of type MyCustomerVisit以前我用在函数的第一行得到一个错误startMyVisit()。我用调试器停在那条线上，值为this.getVisitis ''。startMyVisit()我创建了一个手动调用的按钮，它可以工作。所以，我的结论是我跟注的时机startMyVisit()不对或不对。

我通过使用计算属性解决了这个错误，watcher并且在不是或为空时getVisit调用方法。startMyVisit()getVisitnull

当计算属性getVisit不为 null 或为空并且方法startMyVisit()被调用时，我得到一个错误[Vue warn]: Error in callback for watcher "getVisit": "ReferenceError: startMyVisit is not defined"并且vue.runtime.esm.js?2b0e:1737 ReferenceError: startMyVisit is not defined.

我已经验证了该方法的编写和拼写是否正确（使用复制和粘贴来验证它）。

我将不胜感激任何帮助。

这是我的waitingDetails.vue组件的代码（最新）：

<template>
    <div>
        <h1>
            Your video chat will start shortly...
        </h1>
        <br>
        <h2>
            Number of customers Ahead: {{numberOfCustomersAhead}}
        </h2>
        <br><br><br>
        <!-- <button color="error" v-on:click="startMyVisit">Start My Visit</button> -->
        <v-btn color="success" v-on:click="cancelVisit">Cancel My Video Chat</v-btn>
        <app-visit-info></app-visit-info>
    </div>
</template>

<script>
/* eslint-disable */
import visitInfo from './visitInfo';

export default {
    name: 'waitingDetails',
    components:{
        'app-visit-info': visitInfo
    },
    created(){
        console.log('created() calling method "startMyVisit()"');
        this.startMyVisit();
    },
    mounted(){
        console.log('mounted() calling method "startMyVisit()"');
        this.startMyVisit();
    },
    computed:{
        numberOfCustomersAhead(){
            return this.$store.state.visit.numberOfCustomersAhead;
        },
        getSdk(){
            return this.$store.state.sdk;
        },
        getVisit(){
            console.log('computed: getVisit');
            return this.$store.state.visit;
        }                      
    },
    watch: {
        getVisit: function(){
            if (this.getVisit !== null && this.getVisit !== '') {
                console.log('watch: getVisit !== null and is not empty!');
                startMyVisit();
            } else {
                console.log('watch: getVisit is NULL or is EMPTY');
            }
        }
    },
    methods:{
        startMyVisit(){
            if (this.getVisit !== null && this.getVisit !== '') {
                this.getSdk.visitService.launchVisitVideoChat(this.getVisit) 
                    .then((videoChatLaunched) => {
                if(videoChatLaunched !== true){
                    throw Error('problem launching the visit video chat');
                } else {
                    console.log("Visit Video Chat Launched Successfully !");
                }
                return this.getSdk.visitService.waitForVideoToStart(this.getVisit);
                }).then((visit) => {
                    this.$store.commit('setVisit', visit);
                    console.log('waitForVideoToStart... promise-->',visit);
                    return this.getSdk.visitService.waitForRepresentativeToJoinVisit(visit);
                }).then((updatedVisit) => {
                    this.$store.commit('setVisit', updatedVisit);
                    console.log('waitForRepresentativeToJoinVisit... promise-->',updatedVisit);
                    console.log('customers ahead', updatedVisit.customersAheadOfYou);
                    this.customersAheadOfYou = updatedVisit.customersAheadOfYou;
                    return this.getSdk.visitService.updateConnectionStatus(updatedVisit);
                }).then((visit) => {
                    this.$store.commit('setVisit', visit);
                    console.log('updateConnectionStatus... promise-->', visit);
                    return this.getSdk.visitService.waitForVisitToFinish(visit);
                }).then((visit) => {
                    this.$store.commit('setVisit', visit);
                    console.log('Visit has ended. waitForVisitToFinish... promise-->', visit);
                    return;
                });
            } else {
                console.log('startMyVisit() --> this.getVisit === null or is empty');
            }
        },
        cancelVisit(){
            this.getSdk.visitService.cancelVisit(this.getVisit)
            .then((visit) => {
                console.log('Cancel visit.. promise-->',visit);
            });
        }        
    }
}
</script>

标签： vue.jsvuejs2vue-component

Answer 1

你试过一个nextTick()吗？像这样。

mounted(){
    this.$nextTick(() => {
        this.startMyVisit()
    })
},

这应该使您的组件有机会正确完成加载并startMyVisit在下一次调用时调用该方法。