Question

我使用Vue.js修改我的DOM。我触发了fetch_data()方法，尝试更新data.messages以阅读“爱Vue.JS＆＃39;在成功完成AJAX调用之后。

AJAX调用正在成功运行，它确实在此行中更新了data.message：

self.message = 'Love the Vue.JS'

我可以看到它有效，因为它在控制台中打印。问题是DOM没有使用data.message的新定义进行更新。如何在数据更新时使其工作并更新DOM？

＆＃13;

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data: { message: 'Hello Vue.js!' },
  methods: {
    fetch_data: function() {
      console.log('Running script for ajax...');
      $("#retrieve_data_wait").text("Retrieving data. This will update when complete...");

      $.ajax({
        url: '/test_json',
        dataType: 'json',
        timeout: 60000,
        success: function(data) {
          $("#retrieve_data_wait").text(data.test);
          self.message = 'Love the Vue.JS';
          console.log('SUCCESS')
          console.log(self.message);
        },
        error: function(data) {
          $("#retrieve_data_wait").text("Fail");
        }
        // error: function(jqXHR, status, errorThrown) {
        //   //the status returned will be "timeout" 
        //     alert('Got an error (or reached time out) for data generation.  Please refresh page and try again.  If you see this more than once, please contact your customer success agent.');
        // }
      });
    }
  }
})

＆＃13;

<div id="app">
  <span id="retrieve_data_wait"></span>
</div>

＆＃13;

Answer 1

问题是当你调用jQuery时，你的// Move global definitions here object MyClassGlobalDef { val spark = SparkSession .builder() .getOrCreate() val logger = LoggerFactory.getLogger(this.getClass.getName) } // Force the globals object to be initialized import MyClassGlobalDef._ object MyClass { // Functions here }上下文会丢失。您拥有的回调方法（this）没有返回Vue的引用。传递正确上下文的方法很简单，就是success: function调用中的context属性。

所有这些都记录在jQuery网站上：https://api.jquery.com/jQuery.ajax/ - 只搜索单词＆＃34; context＆＃34;而且你会找到它。

您改进的ajax调用应该如下所示：

$.ajax

在VueJS中更新AJAX数据后，DOM未更新

1 个答案: