Vue renders but does not update

A simpler version of the issue - using a standard example for the Vue documentation (a fiddle here: https://jsfiddle.net/awhartonnj/mo6Ldr8q/ )

Placed the following on my welcome.blade.php page:

'''

    <div id="app-5">
      <p>@{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

...

And the following in my js file:

'''

    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

'''

in the Spark bootstrap js file

'''

    require('./../spark-components/bootstrap');

    require('./home');

    require('./tableauselect');

'''

The page shows the correct 'message' - 'Hello Vue.js!' on initial load, but the v-on:click has no effect - no log errors show in dev tools.

Thanks for any help / pointers.

ashleywnj

9 years ago

Best Answer

Level 2

Ughh ... helps to make use of the resources available. I downloaded the quick start example from Taylor ... based on his example I modified my js file by deleting the opening lines

''''

     var app5 = new Vue({
          el: '#app-5',

''''

and replacing with the following (I renamed the el tag to make it more readable and obviously did not need to use the ID="" with the format shown below)

'''

        Vue.component('my-tableau', {

''''

and then in my welcome.blade.php I wrapped the entire page after the @section('content') with - and of course closed the tag at the end of the page.

'''

    @section('content')
    <activity-log  inline-template>

'''

Please or to participate in this conversation.