CODEWITHSUNDEEP
vue.jsvue-router
oldner
oldner

Reputation: 115

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

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!

Upvotes: 2

Views: 227

Answers (1)

dako
dako

Reputation: 1163

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>

Upvotes: 1

Related Questions