$ emit не запускает родительский компонент VueJs с помощью TypeScript - PullRequest
Новая
       46

$ emit не запускает родительский компонент VueJs с помощью TypeScript

0 голосов
/ 31 марта 2020

Я создаю контролируемый компонент (один компонент является родительским, а другой - дочерним). Родительский компонент - SurveyContainer, а дочерний - SurveyPage1. В SurveyContainer у меня есть объект модели surveyModel и вложенный объект surveyModel.topPreferencesObj, который я хочу инициализировать в SurveyPage1. Так что я передаю этот объект как опору. 

 <template>
<div>  
    <SurveyPage1
            v-bind:prefObj="this.surveyModel.topPreferencesObj" 
            @handle-change="this.handleChange(arg)" >   

    </SurveyPage1> 
</div>


@Component({
components: {
    SurveyPage1
}
})
export default class SurveyContainer extends Vue {

mounted(){ 

}
surveyModel = { 
    topPreferencesObj : {
        option1: false,
        option2: false,
        option3: false,
        option4: false,
        other:""
    }
} 
handleChange(payload:any) {   // this never fires 
    this.surveyModel.topPreferencesObj = payload;  
}
}

Это SurveyPage1. Здесь я получаю объект недвижимости. Также здесь у меня есть часы, которые срабатывают каждый раз, когда что-то меняется. Поэтому, когда это срабатывает, я хочу, чтобы родительский компонент знал, что свойство было обновлено. Но внутри функции наблюдения я получаю TypeError: Невозможно прочитать свойство 'handle-change' из неопределенного Я новичок в vuejs и сейчас действительно тороплюсь. Я ищу Inte rnet и похоже, что он должен работать, но это не так. 

<template>
<div>
    <h2>Survey Page 1</h2>
    <v-checkbox v-model="prefObj.option1" label="" >
    </v-checkbox>
</div>
</template> 
<script lang="ts">
 import { Component, Vue,Prop ,Watch} from 'vue-property-decorator'; 
 @Component
 export default class SurveyPage1 extends Vue {

    @Prop({required: true})
    prefObj:any;

    computed(){
        debugger;
        const blah =  this.prefObj;
    }

    @Watch('prefObj', { immediate: true, deep: true })
    onPrefObjChanged = (val: any, oldVal: any) => {
        debugger;

        this.$emit('handle-change', this.prefObj);  // here I get the error: handle-change undefined
    } 
  } 
 </script>

Спасибо.

1 Ответ

0 голосов
/ 31 марта 2020

Хорошо, проблема была в том, что я неправильно использовал обработчик @Watch

У меня было: 

@Watch('prefObj', { immediate: true, deep: true })
onPrefObjChanged = (val: any, oldVal: any) => { 
    this.$emit('handle-change', this.prefObj); 
}

где это должно быть 

    @Watch('prefObj', { immediate: true, deep: true })
       onPrefObjChanged (val: any, oldVal: any) { 
        this.$emit('handle-change', this.prefObj); 
    }

Вывод: простая функция вместо функции стрелки

...