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
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?
Dan Chap
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.
Dan
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
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?
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 { ... }
*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.
if (!(typeof options.beforeSend === "function" ? options.beforeSend(xhr, options) : void 0)) {
return false;
}
if (xhr.readyState === XMLHttpRequest.OPENED) {
return xhr.send(options.data);
}
so it couldnt get to send request because when you dont specify "beforeSend" it always return from function.
One possible way is to add:
Rails.ajax({
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.
Your first method did the trick though! Really appreciate your input!
const Rails = require('rails-ujs');
Rails.start();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
