Question

成功调用ajax后，页面上呈现的数据不会更新。它保持为空/ null。

似乎我错过了如何连接作为前端变量返回的数据和动态/实时渲染的html元素。

以下是上下文的相关代码段。从中可以清楚地看出什么是缺失/不正确的吗？

的Javascript

page = new Vue({

  el: "#container",

  data: {
    option_id: null,
    option_name: null
  },

  created:function() {

    $.ajax({
      type: 'POST',
      contentType: 'application/json',
      dataType: 'json',
      url: 'ajax_methods/get_option',
      success: function (ajax_data) {

        self = this;

        self.option_id = ajax_data.option_id;        
        self.option_name = ajax_data.option_name;

      },
      error: function (e) {
        console.log(e)
      }
    })

  }
})

HTML

<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
<div id="container">

  <p>{{ option_name }}</p>

    <button v-on:click="send_option()"
      type="button"
      id="left_button"
      name="left_button"
      v-bind:value="option_id">

</div>

检查AJAX成功

在控制台中输入以下内容时，非空值会按预期返回：

self.option_id
self.option_name

Answer 1

您需要在回调

之外捕获this 。

created: function(){ const self = this; $.ajax({ type: 'POST', contentType: 'application/json', dataType: 'json', url: 'ajax_methods/get_option', success: function (ajax_data) { self.option_id = ajax_data.option_id; self.option_name = ajax_data.option_name; }, error: function (e) { console.log(e) } }) }

Answer 2

首先，如果那是确切的代码，那么self我认为不会被初始化。使用var self = this或let self = this

但主要是，您需要在ajax调用之外定义self。在javascript中，this关键字指的是调用对象。直接在created()函数内部，它是Vue实例。但是，this在ajax回调中不会引用Vue实例。

Understand JavaScript’s “this” With Clarity, and Master It

created:function() {

   var self = this    
   $.ajax({
      type: 'POST',
      contentType: 'application/json',
      dataType: 'json',
      url: 'ajax_methods/get_option',
      success: function (ajax_data) {

        self.option_id = ajax_data.option_id;        
        self.option_name = ajax_data.option_name;

      },
      error: function (e) {
        console.log(e)
      }
    })

  }

vue 2.3 AJAX数据绑定不更新

2 个答案: