Javascript vue 2.3 AJAX数据绑定未更新

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

我似乎不知道如何连接作为前端变量返回的数据和动态/实时呈现的html元素

以下是上下文的相关代码段。从中是否可以清楚地看出缺少/不正确的内容

Javascript

HTML

检查AJAX成功与否

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

self.option\u id self.option\u名称 您需要在回调之外捕获此信息

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

---

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

但主要是，您需要在ajax调用之外定义self。在javascript中，this关键字指调用对象。在创建的函数的正内部是Vue实例。但是，一旦进入ajax回调，就不会引用Vue实例

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

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

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

  }