Vuejs Axios，向vee validate添加错误时，错误未显示（我解释更多）

Question

在我的 Vue 项目中，我使用 Vee-Validate 和 Axios。

我有一个 API 调用来注册用户，当我的电子邮件已被使用时，它会引发错误。使用 axios 我捕获了该错误并希望显示错误消息。很简单吧。只是这样做：

this.loading = true;

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 in use'
    });
    // So the error is added and will be showing
    // Now disable the loading icon
    this.loading = false;
  }
});

所以在 catch 中我添加了错误并禁用了按钮内的加载图标。这是按钮组件：

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

但是现在错误消息没有显示，甚至没有添加到错误包中。在执行{{this.errors}} 时，数组为空。我已经解决了这个问题，但我仍然想知道为什么这不起作用以及为什么它适用于我的解决方案。

按钮组件中的解决方案

改变这个：

<loading v-if="loading"/>

到这里：

<loading v-show="loading"/>

现在{{this.errors}}确实有错误项并显示错误。

对于这个问题，这并不是一个丑陋的解决方法，所以我可以接受，但我仍然想知道为什么它不能与 v-if 一起显示加载图标。这个按钮和错误包有什么关系？

Answer 1

v-show 切换 display:none 而 v-if 从 DOM 中删除元素。

当你运行以下代码时

let input = this.$refs['email'].$children[0];

如果您使用v-if，$refs 将无法在 DOM 上找到电子邮件元素。