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>

那么如何在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()

使用根组件方法

如何在方法中从组件访问数据

1 个答案: