Vue 2.0 & Rails 5:声明性呈现而不是反应性

Question

目前，我正在使用Rails 5应用程序浏览Vue指南，并发现我可以更新Vue js对象，但是DOM并不像Declarative Rendering部分所描述的那样。

数据和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工具js控制台。app.message = 'Should update to this'

Answer 1

这个问题的答案与coffeescript如何编译它的变量有关。它向所有变量插入var，不允许全局命名空间访问它们。所需要的只是app作为window对象的一个属性。

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

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