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.

21 Rails & Vue.js Trello Clone - Part 2

Episode 218 · December 5, 2017

Adding new cards to our Vue app, persisting them in Rails, and re-rendering our UI

Javascript VueJS


Subscribe or login to view the transcript for this episode.



Wow a lot to process nice. Will keep a eye on this as I like to move to more frontend stuff. Thank you Chris

geraldcarter08 on

I followed along step by step - but I am not getting the 200 status response. When I check your code on github, it looks like you've added quite a bit more than what was covered in the 2 videos. Everything is just null for me when I click the button. Any direction on where to troubleshoot that?


Hi Chris,

Any plans on creating some content on Vus.js Rails Steps forms?
I have a monster of a form I would like to use this for.



Hi Chris,

I had to set 'this' reference externally to use it in Success callback. But you didn't do that in the video I wonder how that works for you ? Please check the below code snippet SS . https://uploads.disquscdn.c...


I used a thick arrow function which does that for you. You'll see my success function is: "success: (data) => {" and you use "success: function()".

Gustavo Parolin on

Hi Chris. I'm getting an error at 9:33, when I try to add a card.
```Uncaught ReferenceError: Rails is not defined at VueComponent.submitMessages (app.vue:31)```
Can you help me solving this?

Hi Gustavo, I had the same problem... after comparing Chris' application.js file with my own, I noticed I was missing rails-ujs... This used to be a gem which has now been moved into Rails 5.1.

I was able to fixe Rails.ajax by updating my gemfile to run Rails 5.1 or above and by requiring rails-ujs in application.js

Hi Chris, I'm getting a "Uncaught ReferenceError: Rails is not defined" error when trying to send ajax requests with "Rails.ajax"... I've never seen this type of syntax so I'm a bit lost as to where this is coming from.
Make sure you're using rails-ujs and have it included in your asset pipeline. It was introduced in one of the newer versions of Rails to remove jQuery. If you're on an older version of Rails you can either upgrade or change the Rails.ajax to jQuery's version.

Hey Chris, I know that this has come up in this thread a few times but I can't seem to get Rails.ajax to submit anything. I have checked the source code (as well as the models, controllers, etc) several times and feel that it may have something to do with the method not integrating with webpack for some reason. My code is exactly like what is shown in the video. Is it possible that Webpack is not translating the ujs call?

*As a side note, I have required rails-ujs in the application.js file as well and still can't seem to get it to submit any data. 
Additionally, looking at the Rails logs, there isn't even an attempt being made by rails to update the database which suggests to me that there is something wrong with the ujs call not being sent at all.
Heya Brenden I hope you managed to fix this issue. I was inspeting rails-ujs code and I had same issue. It was because of this line in rails-ujs
if (!(typeof options.beforeSend === "function" ? options.beforeSend(xhr, options) : void 0)) {
          return false;
if (xhr.readyState === XMLHttpRequest.OPENED) {
          return xhr.send(;

so it couldnt get to send request because when you dont specify "beforeSend" it always return from function.

One possible way is to add: 

        url: "/cards",
        type: "POST",
        data: data,
        dataType: "json",
        beforeSend: function() { return true },
But i dont like t very much, you can install rails-ujs as module or use ajax of jquery and it should work.
or update rails so far I checked this line is Ok in new rails-ujs
Thanks for your help Filip. Attempted to reinstall/update Rails and still am not able to send anything through AJAX. It doesn't even make any attempt in the terminal logs. Very strange. 

Your first method did the trick though!  Really appreciate your input!
@Filip/Chris - is there an update on that rails-ujs issue?  The new rails-ujs version doesn't seem to solve this (I, like Brenden, still have to include that 'beforeSend: function() { return true } ' line you mentioned in your comment...thanks,

For Rails UJS, I had to add it using yarn (yarn rails-ujs) then import it and start it at the top of my app script like:
const Rails = require('rails-ujs');

I'm not sure if it will carry over into the other components, but this is working for me now.

Login or create an account to join the conversation.