VUE reported an error: TypeError: Cannot read property 'thumbnail' of undefined

problem description

the error is as follows

related codes 

<div class="newsitem" v-for="item in newsItems">
                    <router-link :to="{path: "/newsDetail",query:{ id : item.id }}">
                        <div class="m0"><img :src="item.more.thumbnail">
                            <div class="title">{{item.post_title}}</div>
                            <div class="pubtime"><span>{{item.categories[0].name}} {{item.published_time}}</span></div>
                        </div>
                    </router-link>
                </div>

searched a lot on the Internet, tried a lot of methods did not solve, generally means to call a lot of levels of item.more.thumbnail, report an error, the page can also call up the data normally, that is, report an error!

would like to ask how to solve the problem?

Vue.js javascript
Jan.08,2022

preliminary judgment is that vue cannot find the variable thumbnail. More precisely, it should be that the more under newsItems is not defined or the more under an item is not defined, and you print out newsItems, in the console to see if this is the problem.

for objects with uncertain attributes, point syntax is not recommended. It is recommended to use subscript syntax. In addition, you should fully consider the situation where attributes do not exist, such as

this means that there is no value, and there are at least two field-level errors.
the landlord takes a good look at his field data structure.

add 2018-12-06:
add if judgment before the fields used. It is estimated that Vue adds code tests for code robustness. The example of
is as follows 

<add-person
    v-if="travellerTemplateRule.after && travellerTemplateRule.after.template_people"
    :isShow="isOpenAddNewMask"
    :data="travellerTemplateRule.after.template_people">
</add-person>

Previous: How to solve the problem that third-party plug-ins are affected by the use of rem layout on the mobile side?

Next: How do I return the variable assigned by the asynchronous method within the function?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu