All threads / Vue.js Trello Clone in Rails - Part 7 Discussion

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Vue.js Trello Clone in Rails - Part 7 Discussion

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.

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!

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.

Reply

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!

Reply

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...

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

Reply

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?

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

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"
Reply
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 
Reply

Any hints on how to implement a WIP limit for a certain list ?

Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.