javascript - 从 post 请求返回的数据未传递给 vue 模板
问题描述
我有一个由发布请求(称为方法get_teams
)触发的返回数据,它没有传递给我的 vue 模板。有人能告诉我我做错了什么吗?我没有将数据正确绑定到我的 vue 模板吗?
应用程序.js
var app = new Vue({
el: '#app',
components: {
teamsTableTemplate
},
data: {
teams: null,
editable: true,
show_teams: false
},
methods: {
get_teams : function(){
this.reset_show('get_teams')
$.post(js_local.ajaxurl,{
action:'get_advisor_teams'
}).done(function(data){
this.teams = data
this.show_teams = true
console.log(this.teams)
}).fail(function(data){
console.log('fail @ { action : get_advisory_teams }')
})
}
}
})
团队表模板.js
const teamsTableTemplate = {
template:
`
<table class="table tablesorter">
<thead class="text-primary">
<tr></tr>
</thead>
<tbody class="">
<tr v-for="team in teams">
<td>
<div class="form-check">
<label for="69cd1dbb353338" class="form-check-label">
<input id="69cd1dbb353338" type="checkbox" class="form-check-input"><span class="form-check-sign"></span>
<!---->
</label>
</div>
</td>
<td>
<p class="title">{{team.team_name}}</p>
<p class="text-muted">{{team.problem_statement_text}}</p>
</td>
<td class="td-actions text-right">
<button type="button" class="btn btn-link">
<!----><i class="tim-icons icon-pencil"></i></button>
</td>
</tr>
</tbody>
</table>
`,
props: ['teams','edit'],
data() {
return {
}
}
}
HTML
<div id="app">
<button @click="get_teams"></button>
<teams-table-template :teams="teams" :edit="editable" v-if="show_teams" />
</div>
解决方案
我认为this
.done() 回调中不是您的组件实例,因为您使用的是简单函数。也许使用箭头功能。
尝试改变:
get_teams() {
this.reset_show('get_teams')
$.post(js_local.ajaxurl,{
action:'get_advisor_teams'
}).done((data) => { // use arrow function
this.teams = data
this.show_teams = true
console.log(this.teams)
}).fail(function(data){
console.log('fail @ { action : get_advisory_teams }')
})
}
// also make sure get_teams() method is invoking from somewhere else
created() {
this.get_teams();
}
推荐阅读
- pycharm - 没有遇到错误,脚本返回为 PASS,但 pyautogui 不工作(使用 PyCharm 的机器人框架)
- spring-webflux - 在 webflux 中读取请求正文
- django - 如何将相关序列化程序中的嵌套查询集限制为相关模型实例的子集?
- javascript - 如何使用数组将图像放入 Ionic 缩略图列表中?
- r - 选择性地删除混合字符数据框中的数字
- php - 如何使用php提取后跟数字的单词
- javascript - 如何使用 VBA 在 Office 365 Outlook 中撰写电子邮件?
- google-apps-script - 当单元格由于公式而更改值时,我需要运行一个函数
- sockets - 从 WSO2 ESB 中的 tcp 端点读取纯文本
- angular - ionic 4 通过模态控制器使用模态