Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null

这里写自定义目录标题

  • 前言:
    • 原因:
    • 解决方法:

前言:

今天发现代码数据不能绑定表单,并且一输入就报错
Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第1张图片

Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第2张图片
但是我发现这个model也绑定了,数据类型也是对应的,它就是不能输入数据。
Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第3张图片
Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第4张图片

原因:

由于我前端加载组件时调用了query(),向后端发请求查询此表单的数据用来显示信息

Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第5张图片
Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第6张图片
但是由于第一次后端数据库表中没有数据,返回了null,将前端的form给覆盖了,导致拿不到form中的属性,相当于null.name(根本拿不到)
Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第7张图片
Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第8张图片

解决方法:

在数据库中初始化一条记录,使其不为空!
在这里插入图片描述

Vue报错:vue.runtime.esm.js:1888 TypeError: Cannot use ‘in‘ operator to search for ‘name‘ in null_第9张图片

你可能感兴趣的:(报错,javascript,vue.js,前端)