无法在控制台中更改 app.message = 'something'

Question

在我看来，我正在通过 https://vuejs.org/v2/guide/, I have included https://cdn.jsdelivr.net/vue/latest/vue.min.js 文件尝试 vue.js。第一个应用程序示例我可以在应用程序加载时加载 "Hello Vue!"，但是当我从控制台尝试更改 app.message 时，它不会更改标题。我尝试将数据集查看为 app.dataset 它 returns 空 object.

Js.coffee代码

$(document).ready ->
  # initialization of Vue JS
  app = new Vue(
    el: '#app'
    data: message: 'Hello Vue!')
  app2 = new Vue(
    el: '#app2'
    data: message: 'You loaded this page on ' + new Date)
  app3 = new Vue(
    el: '#app3'
    data: seen: true)

查看代码

.mapWrap
  .latLong
    #app
      {{ message }}
    #app2
      %span{"v-bind:title" => "message"}
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
    #app3
      %p{"v-if"=> "seen"} Now you see me
  - content_for :js do
    = javascript_include_tag 'https://cdn.jsdelivr.net/vue/latest/vue.min.js'

Answer 1

您的问题是 coffeescript 正在 $(document).ready 函数内限定您的应用程序变量的范围。试试这个。

$(document).ready ->
  window.app = new Vue(
    el: '#app'
    data: {message: 'Hello Vue!'})
  window.app2 = new Vue(
    el: '#app2'
    data: message: 'You loaded this page on ' + new Date)
  window.app3 = new Vue(
    el: '#app3'
    data: seen: true)

Example.

无法在控制台中更改 app.message = 'something'

Cannot change app.message = 'something' in console

ruby-on-rails

coffeescript

vue.js

haml