Error in callback for watcher “value“: “TypeError: Cannot read property ‘repalce‘ of null“

vue空页面value空值问题

在页面后台中，输出了Error in callback for watcher “value”: "TypeError: Cannot read property ‘level’ of null"这样的错误，看了网上的一些博客，个人认为就是在input输入框中，当第一次输入，未保存数据之前，接口返回的数据基本都是null，所以可能是会报这个错误

解决办法

<u-form-item :label-position="labelPosition" label="出版物种类" prop="publishVariety" :label-width="labelWidth" :required="true"><u-select model="single-column" :list="publishVarietyList" v-model="publishVarietyShow" @confirm="publishVarietyConfirm":default-value="publishVarietyDefaultValue"></u-select><u-input :border="border" :placeholder="rules.publishVariety[0].message" v-model="model.publishVarietyName" type="select":select-open="publishVarietyShow" @click="publishVarietyShow=true"></u-input></u-form-item><u-form-item :label-position="labelPosition" label="阅读方式" prop="readTypeList" :label-width="labelWidth" :required="true"><u-checkbox-group shape="square" :width="CheckWidth" :wrap="false" @change="readTypeChange"><u-checkbox v-model="item.checked" v-for="(item, index) in readTypeList" :key="item.code" :name="item.code">{{ item.name }}</u-checkbox></u-checkbox-group></u-form-item><u-form-item :label-position="labelPosition" label="主题特色" prop="themeFeatures" :label-width="labelWidth" :required="true"><u-popup v-model="themeFeaturesShow" mode="bottom"><view class="multi-check"><u-checkbox-group shape="square" class="group" @change="themeFeaturesCheckbox" v-model="model.themeFeaturesList"><u-checkbox v-for="(item,index) in themeFeaturesList" :key="index" v-model="item.checked" :name="item.code"class="checkbox">{{item.name}}</u-checkbox></u-checkbox-group><u-button @click="themeFeaturesConfirm">确定</u-button></view></u-popup><u-input :border="border" :placeholder="rules.themeFeatures[0].message" v-model="model.themeFeatures" type="select"@click="themeFeaturesShow = true"></u-input></u-form-item><u-form-item :label-position="labelPosition" label="所有制类型" prop="ownershipType" :label-width="labelWidth" :required="true"><u-select model="single-column" :list="ownershipTypeList" v-model="ownershipTypeShow" @confirm="ownershipTypeConfirm":defailt-value="ownershipTypeDefaultValue"></u-select><u-input :border="border" :placeholder="rules.ownershipType[0].message" v-model="model.ownershipTypeName" type="select":select-open="ownershipTypeShow" @click="ownershipTypeShow = true"></u-input></u-form-item><u-form-item :label-position="labelPosition" label="提供服务" prop="provideServices" :label-width="labelWidth" :required="true"><u-popup v-model="provideServicesShow" mode="bottom"><view class="multi-check"><u-checkbox-group shape="square" class="group" @change="provideServicesCheckbox"><u-checkbox v-for="(item,index) in provideServicesList" :key="index" v-model="item.checked" :name="item.code"class="checkbox">{{item.name}}</u-checkbox></u-checkbox-group><u-button @click="provideServicesConfirm">确定</u-button></view></u-popup><u-input :border="border" :placeholder="rules.provideServices[0].message" v-model="model.provideServices" type="select":select-open="provideServicesShow" @click="provideServicesShow = true"></u-input></u-form-item>

代码中可以看出，在input组件中，v-model绑定的值在一开始是后台接口返回的null值，所以可能会引起我所说的错误。所以要在u-select组件中添加默认值属性，:default-value=“ownershipTypeDefaultValue”
ownershipTypeDefaultValue方法代码如下：

ownershipTypeDefaultValue() {if (_.isEmpty(this.model.ownershipType)) {return;}return [_.findIndex(this.ownershipTypeList, {'value': this.model.ownershipType})];}

可能加了这个不为空判断还是不行，那就要看下你后台接口返回的数据是否为null,如果是null是不行的，null和‘’还是有区别的，所以我们要在methods方法中把为null的属性的值改为’ ’ 代码如下：

async loadCurStore() {let resp = await this.$ajax.get({url: '/bs/mine/getCurStore.json'})console.log('info', resp.info);this.model = _.mapValues(resp.info, value => {if (_.isNull(value)) {value = '';}return value;})console.log('ts',this.model.registerTs);},

map函数在js中是用来遍历作用的，这里是参数有resp.info,value
将value为null的赋值为’’,这样的话就可以了。