Vue 2.0 & Rails 5：声明式渲染不是响应式的

Question

我目前正在使用 Rails 5 应用浏览 Vue 指南，发现我可以更新我的 Vue js 对象，但是 DOM 与 [=17= 中描述的不一样] 节..

The data and the DOM are now linked, and everything is now reactive. How do we know? Just open up your browser’s JavaScript console and set app.message to a different value. You should see the rendered example above update accordingly.

我正在使用此处找到的 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!'

Vue 2.0 & Rails 5：声明式渲染不是响应式的

Vue 2.0 & Rails 5: Declarative Rendering not Reactive

javascript

jquery

ruby-on-rails

vue.js

declarative