Cannot change app.message = 'something' in console

Question

I was trying out vue.js through https://vuejs.org/v2/guide/, I have included https://cdn.jsdelivr.net/vue/latest/vue.min.js file in my view. The First App example I am able to load "Hello Vue!" when the app loads, But when from console I try to change app.message it does not change the title. I have tried viewing the dataset as app.dataset it returns empty object.

Js.coffee Code

$(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)

View Code

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

Bert Bert · Accepted Answer · 2017-03-30T20:15:41

Your problem is that coffeescript is scoping your app variable inside the $(document).ready function. Try this.

$(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.

Cannot change app.message = 'something' in console

1 Answers