（Vue）Axios集合数据无法使用2个属性。我无法解释为什么

Question

我有我遇到过的最奇怪的错误。我在Vue项目中使用Axios和Vee-Validate，从我的api中我得到了一个错误。所以有了公理，我就有了一个陷阱。

例子：

这个$http.post（'v1/auth/register'{第一名：this.first_name，last_name:this.last_name，电子邮件：this.email，电话：this.phone，密码：this.password})然后（响应）=>{this.registration_card=2；}).catch（（错误）=>{if（error.data.error.message===“email_already_exists”）{让输入=这个$参考文献[电子邮件]$子级[0]；input.errors.add（{字段：'email'，消息：'email already is use'}）；this.loading=false；console.log（input.errors）；console.log（this.loading）；}});

现在，奇怪的部分来了。使用此代码：

让输入=这个$参考['email']$子级[0]；input.errors.add（{字段：'email'，消息：'email already is use'}）；this.loading=false；

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

让输入=这个$参考['email']$子级[0]；input.errors.add（{字段：'email'，消息：'email already is use'}）；//this.loading=false；

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

但我希望这个。加载仍然是错误的，因为我希望不显示加载图标。任何人对此都有解释。

编辑：更多代码

方法：{寄存器：函数（）{让anyError=false；这个$验证（this，['first_name'，'last_name'，'phone'，'email'，'password']，function（value，last_item）{this.loading=true；if（值===假）{anyError=true；}if（anyError||！last_item）{回报；}这个$http.post（'v1/auth/register'{第一个名称：this.first_name，last_name:this.last_name，电子邮件：this.email，电话：this.phone，密码：this.password})然后（响应）=>{this.registration_card=2；}).catch（（错误）=>{if（error.data.error.message===“email_already_exists”）{让输入=这个$参考['email']$子级[0]；input.errors.add（{字段：'email'，消息：'email already is use'}）；this.loadingTest=false；console.log（input.errors）；console.log（this.loadingTest）；}});}绑定（this））；},}

这个$validate执行以下操作：

导出默认函数（scope、arrayOfValues、callback）{让total=arrayOfValues.length-1；让last_item=false；arrayOfValues.forEach（函数（值，索引）{让输入=范围$参考[值]$子级[0]；输入$validator.validate（）.then（value=>回调（value，total===索引，index））；});}

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

编辑：这是我使用加载的位置：

<j-button label=“Register”：loading=“loading”@click.native=“Register”/>

按钮组件为：

<模板><按钮类型=“button”>{{label}}</span><加载v-if=“加载”/></按钮></template><脚本>从“vue-loading-spinner/src/components/Circle”导入加载导出默认值{name:'j-button'，道具：[“标签”，'加载'],组件：{加载}}</script>

编辑：更多的代码！！！！！

我的j输入组件

<模板><div><label v-bind:class=“{'active'：（newValue.length>0）}”>{{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”>{errors.first（name）}}</span></div></template><脚本>导出默认值{名称：'j-text'，注入：[“$validator”]，道具：[“标签”，“名称”，“规则”，“值”，],数据（）{返回{newValue:“”}},创建（）{this.newValue=this.value；this.updateValue（）；},方法：{updateValue:函数（）{这个$emit（“输入”，this.newValue）；},}}</script>

Answer 1

所以我发现了这个问题，但原因仍然很奇怪。我将对此提出另一个问题。关于我的j按钮组件：

<模板><按钮类型=“button”>{{label}}</span><加载v-if=“加载”/></按钮></template><脚本>从“vue-loading-spinner/src/components/Circle”导入加载导出默认值{name:'果冻按钮'，道具：[“标签”，'加载'],组件：{加载}}</script>

为了解决这个奇怪的问题，我必须改变这一点：

<加载v-if=“加载”/>

收件人：

<加载v-show=“加载”/>

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

}).catch（错误=>{if（error.data.error.message===“email_already_exists”）{让输入=这个$参考['email']$子级[0]；input.errors.add（{字段：'email'，消息：'email already in use’}）；this.loading=false；}});

但又一次。如果我用v-If代替按钮中的v-show，则不会显示错误。很奇怪。我将提出另一个问题，我希望能得到答案。

Answer 2

这很简单。只有引用更改才会刷新Vue视图。

当你这样做时：

新Vue({数据：[“属性”]，方法：{更改（）{this.property=“yes”；//将刷新}}});

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

更改（）{this.property.field=“yes”；//无法刷新this.property.mtehod（“是”）；//无法刷新}

只有一些特定的方法（例如array.push（）)Vue.js对其进行了调整，以识别这些方法会刷新视图。如果你想成功，你需要打电话这个$强制更新（）或使用Vue.set（）更换阀门。

因此，当您添加错误时，只有当您更改数据属性时，视图才会被刷新(加载)视图会识别数据值已更改并刷新视图。

请阅读深度反应性特别是“如何跟踪更改”一章。请查看哪些设置数据的方法是被动的，哪些不是。