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的赋值为’’,这样的话就可以了。