Vue.js에서 계산된 것을 사용하고 마운트된 경우 계산된 속성이 아직 비어 있습니다.

Vue.js에서 계산된 것을 사용하고 마운트된 경우 계산된 속성이 아직 비어 있습니다.

처음입니다.Vue.js고객님이 돌아오면 자동으로 화상채팅으로 고객과 영업사원을 연결하는 컴포넌트를 만들고 있습니다(앞서는 고객님은 없습니다).함수를 호출하여 서드파티 화상채팅 소프트웨어를 활성화해야 합니다.startMyVisit().

이전에 에러를 표시했을 경우Error: visit argument is not of type MyCustomerVisit기능 제일선에서startMyVisit()나는 디버거와 가치의 그 선에서 멈췄다.this.getVisit이''호출 버튼을 만들었습니다.startMyVisit()수동으로 동작합니다.그래서 제 결론은 전화를 거는 타이밍이startMyVisit()틀렸는지, 틀렸는지.

이 에러는, 을 사용해 해결했습니다.watcher계산 재산으로getVisit및 콜 방식startMyVisit()언제getVisit아니다null또는 비어 있습니다.

속성 계산 시getVisitnull이 아니거나 비어 있지 않으며 메서드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.

메서드가 올바르게 쓰여져 있고 철자가 맞는지 확인했습니다(복사앤페이스트를 사용하여 확인).

아무쪼록 잘 부탁드립니다.

여기 제 대기 세부사항의 코드가 있습니다.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>

작은 오타가 있어서 문제가 생긴 것 같습니다.워처에는 다음 코드가 있습니다.

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();.

먹어본 적 있어요?nextTick()?이렇게.

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

그러면 컴포넌트가 로드를 올바르게 완료할 수 있으며startMyVisit다음 눈금에 대한 메서드.

언급URL : https://stackoverflow.com/questions/53633763/using-computed-in-vue-js-and-when-mounted-is-called-the-computed-property-is-sti