Vue.js element not updating when changed in a callback function

Question

I have a file app.js with the following vue object:

var app = new Vue({
  el: '#app',
  data: {
    test: ''
  }
});

I also have a separate js file which is loaded after the app.js file.

When the js file contains the following code, the object will update and show on the page.

app.test = 'test'
$(document).ready(function() {

}

However if I move the first line into the document ready callback function then the element doesn't update on the page:

$(document).ready(function() {
  app.test = 'test'
}

I am not quite sure why this is happening... Would someone be able to explain this to me? And potentially let me know of a way so that I can update the element in the document ready callback function.

Thank you.

I'm actually trying to update the value in a websocket event callback function. This just emulated the behavior in a simpler and shorter way. — Pabi
– Pabi, Commented Dec 30, 2017 at 2:18
Instead of document.ready, could you use the mounted event in Vue? — PatrickSteele
– PatrickSteele, Commented Dec 30, 2017 at 2:47

Etheryte · Accepted Answer · 2017-12-30 02:24:24Z

1

In an isolated example the problem you've described doesn't occur. The problem must be somewhere in the code you've omitted from your question.

const app = new Vue({
  el: '#app',
  data: {
    test: 'foo'
  }
});

$(() => {
 app.test = 'bar';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ test }}</p>
</div>

answered Dec 30, 2017 at 2:24

Etheryte

25.4k12 gold badges77 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pabi Over a year ago

I apologize for wasting your time. I should have looked further into it before posting.

Etheryte Over a year ago

@Pabi It's no problem, hope you find out where your issue lies.

Pabi Over a year ago

Turns out the problem arises when I have two instances of the vue object loaded at the same time.

Collectives™ on Stack Overflow

Vue.js element not updating when changed in a callback function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related