时间戳

首页 > 解决方案 > 检查对象是否存在而不抛出错误

vue.js - 检查对象是否存在而不抛出错误

问题描述

所以，我有多个对象的数据，如下所示：

let form = {
    name: '',
    bank: {
        name: '',
        number: '',
    } 
}

data: form,
errors: JSON.parse(JSON.stringify(form))

当发生错误时（值为空，它被添加到错误属性中，因此，如果名称为空，错误将类似于

errors: {
    name: {
        {'Name must be set'}
    }
}

现在，如您所见，由于银行对象从未出错，errors 属性不会有银行对象，这会导致错误（我无法为银行返回空数据，因此需要在我的 html 中提供方法）

所以，在我的 html 中，我试图从 errors 属性中获取错误

<input type="text"
       class="bg-grey-lightest border outline-none p-2 text-black text-sm w-full"
       placeholder="{{ __('ex : Barclays') }}"
       v-model="form.bank.bank">
<span v-for="error in errors.bank.bank" class="hasError">
    @{{ error }}
</span>

上面的 html 会抛出一个错误，因为 errors.bank.bank 不存在，只有 errors.name 如上所述，那么如何在通过 v-for 运行它之前检查该对象是否存在以获取错误？

标签： vue.jsvuejs2

解决方案

您需要执行检查以查看是否填充了错误（使用 if）：

https://jsfiddle.net/Sirence/eywraw8t/402107/

<div id="app">
  <div v-if="errors && errors.bank">
  <span v-for="error in errors.bank.bank" class="hasError">
    @{{ error }}
 </span>
  </div>
</div>

推荐阅读