Question

我有我遇到过的最奇怪的错误。我在Vue项目中使用Axios和Vee-Validate，并且从我的api中收到错误消息。因此，有了axios，我有一个收获。

示例：

this.$http.post('v1/auth/register', {
                first_name: this.first_name,
                last_name: this.last_name,
                email: this.email,
                phone: this.phone,
                password:this.password
            }).then((response) => {
                this.registration_card = 2;
            }).catch((error) => {

                if(error.data.error.message === "email_already_exists") {
                    let input = this.$refs['email'].$children[0];
                    input.errors.add({ field: 'email', msg: 'email already is use'});
                    this.loading = false;

                    console.log(input.errors);
                    console.log(this.loading);
                }

            });

现在奇怪的部分到了。使用以下代码：

let input = this.$refs['email'].$children[0];
    input.errors.add({ field: 'email', msg: 'email already is use'});

this.loading = false;

input.errors仍然为空，并且不会显示错误。但是当我这样做时：

let input = this.$refs['email'].$children[0];
    input.errors.add({ field: 'email', msg: 'email already is use'});

 // this.loading = false;

因此将不会设置this.loading，然后将设置错误并将其显示在我的视图中。

但是我希望this.loading仍然为false，因为我不希望显示我的加载图标。任何人对此都有解释。

编辑：更多代码

methods: {
    register: function () {
        let anyError = false;
        this.$validate(this, ['first_name', 'last_name', 'phone', 'email', 'password'], function (value, last_item) {

            this.loading = true;

            if (value === false) {
                anyError = true;
            }

            if (anyError || !last_item) {
                return;
            }

            this.$http.post('v1/auth/register', {
                first_name: this.first_name,
                last_name: this.last_name,
                email: this.email,
                phone: this.phone,
                password: this.password
            }).then((response) => {
                this.registration_card = 2;
            }).catch((error) => {
                if (error.data.error.message === "email_already_exists") {
                    let input = this.$refs['email'].$children[0];
                    input.errors.add({field: 'email', msg: 'email already is use'});
                    this.loadingTest = false;

                    console.log(input.errors);
                    console.log(this.loadingTest);
                }

            });

        }.bind(this));
    },
}

this。$ validate为此：

export default function(scope, arrayOfValues, callback) {

let total = arrayOfValues.length - 1;
let last_item = false;

arrayOfValues.forEach(function(value, index) {
    let input = scope.$refs[value].$children[0];
    input.$validator.validate().then(value => callback(value, total === index, index));
   });
}

我这样做是因为我有自定义输入组件

编辑：这是我正在使用加载的地方：

<j-button label="Register" :loading="loading" @click.native="register"/>

按钮对应的是：

<template>
    <button type="button">
        <span v-if="!loading">{{label}}</span>
        <loading v-if="loading"/>
    </button>
</template>

<script>
import loading from 'vue-loading-spinner/src/components/Circle'

export default {
    name: 'j-button',
    props: [
        'label',
        'loading'
    ],
    components: {
        loading
    }
}
</script>

编辑：更多代码！！！！

我的j输入组件

<template>
    <div>
        <label v-bind:class="{ 'active': (newValue.length > 0)}">{{label}}</label>
        <input v-bind:class="{ 'error': (errors.has(name))}" type="text" :name="name" v-validate="rules" :placeholder="label" v-model="newValue" v-on:input="updateValue()" ref="input">
        <span v-if="errors.has(name)">{{errors.first(name)}}</span>
    </div>
</template>

<script>
    export default {
        name: 'j-text',
        inject: ['$validator'],
        props: [
            'label',
            'name',
            'rules',
            'value',
        ],
        data() {
            return {
                newValue: ''
            }
        },
        created() {
            this.newValue = this.value;
            this.updateValue();
        },
        methods: {
            updateValue: function () {
                this.$emit('input', this.newValue);
            },
        }
    }
</script>

Answer 1

这很简单。仅参考更改会刷新Vue视图。

执行此操作时：

new Vue({
    data: ['property'],
    method: {
       change() {
           this.property = "yes"; // will get refreshed
       }
    }
});

视图将刷新（显示更改）。但是，当您更改对象的字段引用（而不是对象本身）或在其上调用方法时，它不会刷新。

 change() {
     this.property.field = "yes"; // won't get refreshed
     this.property.mtehod("yes"); // won't get refreshed
 }

Vue.js仅对某些特定方法（例如array.push()）进行了调整，以使这些方法可以刷新视图。如果要使其工作，则需要调用this.$forceUpdate()或使用Vue.set()来更改价位。

因此，当您添加错误时，仅当您更改数据属性（loading）时，视图才会被刷新。视图会识别出数据值已更改并刷新了视图。

请阅读Reactivity in Depth，尤其是“如何跟踪更改”一章。请查看哪种设置数据的方法是被动的，哪些不是。

Answer 2

所以我已经找到了问题，为什么仍然很奇怪。我将对此提出另一个问题。关于我的j按钮组件：

<template>
    <button type="button">
        <span v-if="!loading">{{label}}</span>
        <loading v-if="loading"/>
    </button>
</template>

<script>
import loading from 'vue-loading-spinner/src/components/Circle'

export default {
    name: 'jellow-button',
    props: [
        'label',
        'loading'
    ],
    components: {
        loading
    }
}
</script>

要解决这个奇怪的问题，我必须对此进行更改：

<loading v-if="loading"/>

收件人：

<loading v-show="loading"/>

如果我更改了此设置，那么将在我的捕获中加载错误并关闭按钮加载图标：

}).catch(error => {
                    if(error.data.error.message === "email_already_exists") {
                        let input = this.$refs['email'].$children[0];
                        input.errors.add({field: 'email', msg: 'email already in use'});
                        this.loading = false;
                    }
                });

但是再次。如果我在按钮中执行v-if而不是v-show，则不会显示错误。很奇怪。我将提出另一个问题，希望对此有一个答案。

（Vue）Axios设置数据不适用于2个属性。我无法解释为什么

2 个答案: