Activity
I'm using standard Rails views (rather than an API) with quite a lot of Vue components - but on page load, all of my those components are not rendered for a split second. They then all blink into existence all at once, which obviously isn't a great UX. How can I combat this effect?
Alternativel you can just answer here "How would you test a Vue component in Rails?"
Loving the Vue vids so far, but it would be great to hear your thoughts on testing the front end. Would this be a Capybara/clickety-click kind of thing, or would you recommend a JS testing library etc.
Loving the Vue vids so far, but it would be great to hear your thoughts on testing the front end. Would this be a Capybara/clickety-click kind of thing, or would you recommend a JS testing library etc.
Posted in Global Autocomplete Search Discussion
Would love to see this in Vue within an app-wrapper (data-behavior='vue') like you talked bout in ep 239! I've been banging my head against a number of these options (https://github.com/vuejs/awesome-vue#autocomplete) within the context of a Rails app.
Posted in Sortable Drag and Drop Discussion
Thanks for the great video Chris! I'm running into a 'sortable is not a function' error that I'm hoping you can help with:
# Gemfile
# Gemfile
gem 'jquery-ui-rails', '~> 6.0', '>= 6.0.1' gem 'acts_as_list', '~> 0.9'
# application.js
//= require jquery //= require rails-ujs //= require turbolinks //= require jquery.easy-autocomplete //= require trix //= require jquery-ui/widget //= require jquery-ui/widgets/sortable //= require_tree .
# application.html
... <head> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> ...
# projects/index.html.erb
<div id="projects-index-body"> <%= render @projects %> </div>
# _project.html.erb
<div class="index-item">
<div class="index-title">
<%= link_to project.name, project %>
</div>
</div># projects.js
document.addEventListener('turbolinks:load', function() {
$('#projects-index-body .index-item').sortable();
});The error I get is:
Uncaught TypeError: $(...).sortable is not a function
at HTMLDocument.<anonymous> (projects.self-aa444772b5cec4b7d7c04af684612adbe666b794a474b2ed041a79415d330c43.js?body=1:2)
at Object.Turbolinks.dispatch (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6)
at e.notifyApplicationAfterPageLoad (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
at e.pageLoaded (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7)
at turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6
(anonymous) @ projects.self-aa444772b5cec4b7d7c04af684612adbe666b794a474b2ed041a79415d330c43.js?body=1:2
Turbolinks.dispatch @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6
e.notifyApplicationAfterPageLoad @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7
e.pageLoaded @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7
(anonymous) @ turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6Interestingly I also get a buttload of other errors like:
Uncaught TypeError: Cannot read property 'dialog' of undefined Uncaught TypeError: Cannot read property 'bridge' of undefined Uncaught TypeError: Cannot read property 'mouse' of undefined Uncaught TypeError: $.widget is not a function Uncaught TypeError: Cannot set property 'position' of undefined Uncaught TypeError: Cannot set property 'focusable' of undefined Uncaught TypeError: Cannot set property 'keyCode' of undefined Uncaught TypeError: Cannot set property 'escapeSelector' of undefined Uncaught TypeError: Cannot set property 'formResetMixin' of undefined Uncaught TypeError: Cannot set property 'plugin' of undefined Uncaught TypeError: Cannot set property 'safeBlur' of undefined
Which makes me think that I'm missing a require in my application.js - I just have no idea which one!
Thanks in advance for taking a look, I totally understand if this error is too specific for you to help with.