1

在我的 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用于显示加载图标。这个按钮和错误包有什么关系？

4

1 回答 1

0

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

当您运行以下代码时 

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

$refs如果您使用v-if.

于 2018-07-20T14:55:08.550 回答