Just launched! Get 30% off Rails Revisited Have a Look

Try That Again: Molecules

Buy or Subscribe

You can access this course in just a minute, and support my efforts to rid the world of crappy online courses!

Buy Standalone  Subscribe

We got hung up a bit on the nav bar, but the hopefully the rest of the course page will be straightforward.

Our routing is in place, so let's turn on the nav!

  • Adding a link
  • Noting which is active
  • Showing which is free

The Top Navigation

Let's fill out the top nav stuff in our v-app-bar:

  • Logo and collapse
  • Course links
  • User icon

The Lesson (video, text, commands)

  • The video slide (not logged in)
  • The lesson text
  • Lesson command list

Yay for problems!

It's how we learn. Or... relearn in my case. I got locked up for 3 hours on this, spent a chunk of my weekend trying to figure it out. Also wrote a post about it if you're interested.

Vuetify and Nuxt are Powerful

I can be snarky, especially when I'm frustrated. That's not fair to these powerful tools!

  • With great power comes great frustration, especially when things change so often
  • These tools do a lot for you, sometimes it's just not obvious
  • I need to be more patient

I'm Human

I am editing things out - but only to keep a good pace and also remove redundancy.

  • I make ridiculous errors (spelling, omissions, etc) just like anyone
  • I get distracted trying to code and speak at the same time
  • I'm doing this on nights and weekends

The Solution

Vuetify was trying to be helpful as I was completely overwriting the state object, course. This quote from someone responding to my post hit it right on the head:

Interesting read, I’m not a Vue developer but from what I can tell this boils down to essentially a value/reference type issue? You wholesale replaced the thing be monitored rather than updating the thing being monitored?

The solution was to use Object.assign, which I'll show you...

How did I actually solve this?

I'm adding this bit after I recorded the wrapup as it might be interesting to some folks. Basically it was a process of thrashing, which means I tried all kinds of changes to see what broke and how. I did start with a step-wise process, but threw that out the window when things didn't change.

I went on a walk after a few hours and I kept coming back to the thought: "why are only two buttons duplicated?" It seemed too coincidental that they were also the ones with dynamic links (aka course.discussion). I replaced the code with a hard-coded value and the problem went away (href='test').

That's when I knew it had something to do with state and then the sky fell in and I realized it was a problem I had solved a few times before: using Object.assign.