Vue router-view is broken when it tries to read a variable which is not in that component

user_14276311 0
Viewed 72

I m troubling with an error for 2 days. I opened an issue on Github but they closed because of my project has both front-end and backend server. Now the problem is explained with a video gif here: https://s8.gifyu.com/images/screen-recorder-sun-nov-15-2020.gif

The full image of error: https://i.ibb.co/9h4LZ9B/Screenshot-from-2020-11-15-16-25-12.png

When I try to open Problem Details page, router is broken. The error that router says is that it cannot find property 'name' in Problem Details page. Here is the problem. There is no any 'name' variable in the code that error shows. Here is the reproduction of my code:

https://codesandbox.io/s/elastic-sky-rwpzn

I am sick of that situtiaon. I ll be grateful with any help. Thanks!

vue-router vue.js
1 Answers

Your problemDetails.user.name is the name that you're getting an exeption for. Probably your template is trying to get rendered before you get the user. Try adding a v-if in that div, and it will be rendered only if the user exists:

<div class="problem-detail-info" v-if="problemDetails.user">
  <p>created by {{ problemDetails.user.name }}</p>
</div>
user_100335840
Related