Skip to main content

Subscribe to GoRails to get access to this episode and all other pro episodes, and new awesome content every month.

Subscribe Now
Only $19/month

Unlimited access. Cancel anytime.

5 Vue.js Trello Clone in Rails - Part 7

Episode 223 · January 8, 2018

In this episode, we add card component, editing of cards, and the ability to create new lists

Javascript VueJS


Transcripts

Subscribe or login to view the transcript for this episode.

Discussion


Gravatar

Awesome series! Currently using Vue.js on it's own talking to a PHP Yii2 API but love my Rails so was keen to see how i can use it with Rails.

Would love to see more! Thanks.

Gravatar

Thanks Josh! I'm actually finishing up an episode adding realtime updates to the Trello clone with Vuex and ActionCable. Should be out in the next week or two!

Gravatar

Yeah that will be awesome. Vuex is awesome. Combined with Rails ActionCable though that will be cool to see. We use Vue Axios for API calls and bootstrap-vue which might want to look at for front-end.

Also highly recommend the Vue Chrome extension to help see what's in the Vuex, Events and general components being loaded.


Gravatar

Chris, thanks for this. I spent a few whole days banging my head trying to understand Vue + components and how they fit into a normal Rails development flow and I finally get it after this series. Can't wait for more!


Gravatar

Great course! I want to see something about routing with Vue. In original Trello application when you click on card the url change.
Would be awesome if you cover the Rails 5.2 features, mainly Active Storage and https://github.com/stimulus...

Gravatar

Those will be covered shortly! Just want to finish up this series real fast first. :)


Gravatar

This was a great series! I love the practical steps forward, and refactoring into components was wonderfully illustrated.

I'm experiencing a bug in the program, and I wonder if it's something specific to my code. When I move a card and then click to edit the name within a modal, the card title is correct, but the text in the input box is incorrect. For example, if I have a list with Item 1 and Item 2, then I drag Item 2 to the first location, then click on Item 2, I get a modal with the title "Item 2" but the text in the input area is "Item 1".

Are you getting the same behavior?

Gravatar

Yeah, I do see the same thing. Will take a look at a fix for it.

Gravatar

And fixed. The solution is to add the "key" property to the loop so it can differentiate which items have changed.

card v-for="card in list.cards" :key="card.id" :card="card" :list="list"
Gravatar

That does the trick.


Gravatar
Hi Chris,

Thank you for the excellent courses! Your explanations and narration are very good.

I've made it through part 7 and all has been working so well. Any exceptions I've been able to trace back to my own typos or missed steps.

I am stumped over the the fact that when I drag a list to a new position, and then add a new list, the new list does not appear. If I refresh the page or make any change to the vue app and save the missing new list(s) appears. If I add a new list without dragging a list to a new position first, all is good. I've also found that I can do everything else without causing the new list to fail. It only fails when I drag a whole list before adding a new list.

Can you help me with what I must be doing wrong?

Thanks again! I'm very pleased with all I'm learning through GoRails.

Best,
 Paul 

Login or create an account to join the conversation.