受欢迎的博客标签

[Vue warn]: Error in render function: “TypeError: Cannot read property 'first_name' of null”

Published

You are most likely getting that error because user in your Vuex store is initially set to null. The user getter mapped to your Vue component is returning that null value before some initialization to the Vuex store properly sets the user. You could initially set the user to an empty object {}. This way, user.first_name in your Vue component's template will be undefined and nothing will be rendered in the template.

Alternatively, you could add a v-if="search" attribute to the containing div element:

<div v-if="search">
<!--双向绑定数据search-->
<label>输入要查询的天数</label>
<input class="form-control" type="text" v-model="search.priceRangeFrom" aria-describedby="priceRangeFromHelp" placeholder="输入要查询最小价格" />
<input class="form-control" type="text" v-model="search.priceRangeTo" aria-describedby="priceRangeToHelp" placeholder="输入要查询最大价格" />
<small id="priceRangeFromHelp" class="form-text text-muted">最小价格:输入要查询最小价格.</small> 
<small id="priceRangeToHelp" class="form-text text-muted">最大价格:输入要查询最大价格.</small> 
</div>

This way, the div and its contents will not be rendered until the value of the mapped user property is truthy. This will prevent Vue from trying to access user.first_name until the user is properly set..