При использовании computed в Vue.js и при вызове смонтированного свойства свойство computed все еще пусто

Question

Я новичок в Vue.js.Я работаю над компонентом, который автоматически соединяет клиента и торгового представителя в видеочате, когда очередь за ним растет (впереди клиентов больше нет).Мне нужно активировать стороннее программное обеспечение для видеочата, вызвав функцию startMyVisit().

Ранее я получаю сообщение об ошибке Error: visit argument is not of type MyCustomerVisit в первой строке функции startMyVisit().Я остановился на этой строке с отладчиком, и значение this.getVisit равно ''.Я создал кнопку для вызова startMyVisit() вручную, и она работает.Итак, я пришел к выводу, что мое время для звонка startMyVisit() неверно или не правильно.

Я исправил эту ошибку, используя watcher для , вычисленное свойство getVisit и вызов метода startMyVisit(), когда getVisit не null или пусто.

Когда вычислено свойство getVisit не равно нулю или не пусто и вызван метод 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.

Я проверил, что метод написан и написан правильно (для проверки использовали copy и paste ).

Буду признателен за любую помощь.

Вот код моего waitDetails.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>

Answer 1

Я думаю, у вас может быть небольшая опечатка, которая вызывает проблему.В вашем наблюдателе у вас есть этот код:

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');
}

Но я считаю, что вам нужно изменить startMyVisit(); на this.startMyVisit();.

Answer 2

Вы пробовали nextTick()?вот так.

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

Это должно дать вашему компоненту возможность правильно завершить загрузку и вызвать метод startMyVisit на следующем тике.