Ask A Question


You’re not receiving notifications from this thread.

Rails & Vue.js Trello Clone - Part 2 Discussion

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 geraldcarter08

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.



me too


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 Gustavo Parolin

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

I had the same error and to fix it, I've added "import Rails from '@rails/ujs'"; into the script part in app.vue likewise :

import Rails from '@rails/ujs'; export default { ... }
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.

that works up until you have more than one component. Then it'll complain rails-ujs is already loaded.
My work around is to add

import Rails from "rails-ujs"

in each script/component.

This is still problematic with Rails 6.0.0rc1


On Rails 6 you can import rails-ujs like that :

import Rails from '@rails/ujs';

between script tags in your app.vue


Nice Pierre. Worked for me as well

Join the discussion
Create an account Log in

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

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

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