javascript - vue 2.3 AJAX数据绑定(bind)不更新

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