Vue 2.0＆Rails 5：Declaritive Rendering not Reactive

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!' 

Google 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!'