检查对象是否存在而不会引发错误

时间:2018-10-01 13:42:12

标签: vue.js vuejs2

因此,我的数据具有多个对象,例如:

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

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

发生错误时(值为空,它将被添加到errors属性中,因此,如果名称为空,则错误将类似于

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

现在,如您所见,由于bank对象从未出错,所以errors属性将没有bank对象,这会导致错误(我无法为银行返回空数据,因此需要一种方法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运行该对象以获取错误之前,如何检查该对象是否存在?

2 个答案:

答案 0 :(得分:1)

您需要执行检查以查看是否填充了错误(使用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>

答案 1 :(得分:0)

您可以在跨度中添加类似v-if="errors && errors.bank的内容