Vue 2.0 и Rails 5: декларативный рендеринг не реагирует

В настоящее время я просматриваю руководство по Vue с приложением Rails 5 и обнаружил, что могу обновить свой объект Vue js, но DOM не соответствует описанию в Декларативная визуализация.

Теперь данные и DOM связаны, и теперь все является реактивным. Откуда нам знать? Просто откройте консоль JavaScript своего браузера и установите для app.message другое значение. Вы должны увидеть обновленный обновленный пример выше.

Я использую gem 'vuejs', найденный здесь: https://github.com/ytbryan/vuejs

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require vue2
//= require vue-router2
//= require vue-validator
//= require vuex
//= require_tree .

home.html.haml

#app
  %div
   {{ message }}

main.coffee

$(document).on "turbolinks:load", ->

   app = new Vue
     el: '#app'
     data: 
       message: 'Vue initialized!'

Консоль Chrome tools js .. app.message = 'Should update to this'


ruby-on-rails javascript vue.js jquery declarative
person shroy    schedule 15.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ответ на этот вопрос был связан с тем, как coffeescript компилирует свои переменные. Он вставляет var во все переменные, не позволяя им быть доступными для глобального пространства имен. Все, что требуется, - это чтобы app был свойством объекта window.

$(document).on "turbolinks:load", ->

   window.app = new Vue
    el: '#app'
    data: 
      message: 'Vue initialized!'
person shroy    schedule 06.03.2017