CODEWITHSUNDEEP
javascriptdomvue.js
Pabi
Pabi

Reputation: 994

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

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.

Upvotes: 0

Views: 611

Answers (1)

Etheryte
Etheryte

Reputation: 25310

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>

Upvotes: 1

Related Questions