javascript - 如何从方法中的组件访问数据

Question

你好，我遇到了以下问题:

我正在开发一个由多个组件组成的Vue应用程序。现在我有一个使用 vee-validate 的组件。仅对于自定义验证，我想更改组件data()对象中的数据元素。仅当我尝试此操作时，才会弹出以下异常:无法设置未定义的属性“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>

那么如何在isKenteken函数中访问load.kenteken呢？

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

使用根组件方法