vue 2.3 AJAX 数据绑定未更新

Question

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

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

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

爪哇语

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 实例。

清晰地理解JavaScript的"这个"，并掌握它

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