Как получить доступ к данным из компонента в методе

Question

Привет, я застрял со следующим:

Я работаю над приложением Vue, которое состоит из нескольких компонентов. Теперь у меня есть компонент, который использует vee-validate. Только для пользовательского validation я хочу изменить элемент данных в компоненте data() объекта. Только если я попробую это, появится следующее Exception: не может установить свойство 'kenteken' из неопределенного

Код выглядит следующим образом:

<script>
    import {Validator} from 'vee-validate';
    import nl from 'vee-validate/dist/locale/nl';

    const isKenteken = (value) =>{
        app.loader.kenteken= true;
        return axios.post('/api/validate/kenteken', {kenteken: value}).then((response) => {
            // Notice that we return an object containing both a valid property and a data property.
            app.loader.kenteken = false;
            app.voertuig.merk = response.data.Algemeen.Merk;
            app.voertuig.model = response.data.Algemeen.Type;
            app.voertuig.brandstof = response.data.Algemeen.Brandstof.toLowerCase();
            app.voertuig.type_id = response.data.Algemeen.TypeId;
            app.voertuig.model_id = response.data.Algemeen.ModelId;
            app.voertuig.merk_id = response.data.Algemeen.MerkId;
            console.log(response.data.Algemeen);
            return {
                valid: true,
                data: {
                    message: response.data.Algemeen,
                }
            };
        }, (error) => {
            console.log(error);
            app.voertuig.kenteken = '';
            app.loader.kenteken_onbekend = 1;
            app.loader.kenteken = false;
            return false;

        });
    };

    Validator.localize('nl', nl);

    Validator.extend('kenteken', {
        validate:isKenteken,
        getMessage: (field, params, data) => {
            loader.kenteken = false;
            voertuig.merk = data.message.Merk;
        }
    });



    export default {
        name: "app",
        data() {
            return {
                voertuig: {
                    kenteken: '',
                    model: '',
                    model_id: '',
                    type: '',
                    type_id: '',
                    merk: '',
                    merk_id: '',
                    brandstof: '',
                    schadevrijejaren: ''
                },
                bestuurder: {
                    geboortedatum: '',
                    postcode: '',
                    huisnummer: '',
                    straat: '',
                    woonplaats: ''
                },
                loader: {
                    kenteken_onbekend: false,
                    kenteken: false,
                },
            }
        },
        mounted() {
            var self = this;
        }
    }
</script>

Так как получить доступ к load.kenteken в функции isKenteken?

Answer 1

Не следует создавать функцию, которая будет ссылаться на компонент Vue вне области приложения Vue. Вместо этого вы должны поместить функцию isKenteken() внутри компонента Vue следующим образом

<script>
    import {Validator} from 'vee-validate';
    import nl from 'vee-validate/dist/locale/nl';

    Validator.localize('nl', nl);

    Validator.extend('kenteken', {
        validate:isKenteken,
        getMessage: (field, params, data) => {
            loader.kenteken = false;
            voertuig.merk = data.message.Merk;
        }
    });



    export default {
        name: "app",
        data() {
            return {
                voertuig: {
                    kenteken: '',
                    model: '',
                    model_id: '',
                    type: '',
                    type_id: '',
                    merk: '',
                    merk_id: '',
                    brandstof: '',
                    schadevrijejaren: ''
                },
                bestuurder: {
                    geboortedatum: '',
                    postcode: '',
                    huisnummer: '',
                    straat: '',
                    woonplaats: ''
                },
                loader: {
                    kenteken_onbekend: false,
                    kenteken: false,
                },
            }
        },
        methods{
            isKenteken(value){
                this.loader.kenteken= true;
                return axios.post('/api/validate/kenteken', {kenteken: value}).then((response) => {
                    // Notice that we return an object containing both a valid property and a data property.
                    this.loader.kenteken = false;
                    this.voertuig.merk = response.data.Algemeen.Merk;
                    this.voertuig.model = response.data.Algemeen.Type;
                    this.voertuig.brandstof = response.data.Algemeen.Brandstof.toLowerCase();
                    this.voertuig.type_id = response.data.Algemeen.TypeId;
                    this.voertuig.model_id = response.data.Algemeen.ModelId;
                    this.voertuig.merk_id = response.data.Algemeen.MerkId;
                    console.log(response.data.Algemeen);
                    return {
                        valid: true,
                        data: {
                            message: response.data.Algemeen,
                        }
                    };
                }, (error) => {
                    console.log(error);
                    this.voertuig.kenteken = '';
                    this.loader.kenteken_onbekend = 1;
                    this.loader.kenteken = false;
                    return false;

                });
            }
        },
        mounted() {
            var self = this;
        }
    }
</script>

Если вам нужно использовать функцию из другого компонента. Вам нужно будет найти способ сделать так, чтобы они ссылались на этот компонент, чтобы использовать эти методы. Например, внутри mounted() другого компонента вы можете использовать методы корневого компонента с помощью this.$root.isKenteken()