Question

我有一个文件app.js，其中包含以下vue对象：

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

我还有一个单独的js文件，它在app.js文件之后加载。

当js文件包含以下代码时，该对象将更新并显示在页面上。

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

}

但是，如果我将第一行移动到文档就绪回调函数中，那么该元素不会在页面上更新：

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

我不太清楚为什么会发生这种情况......有人能够向我解释这个吗？并且可能让我知道一种方法，以便我可以更新文档就绪回调函数中的元素。

谢谢。

Answer 1

在一个孤立的例子中，您所描述的问题并未发生。问题必须出在您从问题中省略的代码中。

＆＃13;

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

＆＃13;

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

＆＃13;

在回调函数中更改时，Vue.js元素不会更新

1 个答案: