我有一个由发布请求触发的返回数据(称为get_teams
的方法),该请求未传递给我的vue模板。有人可以告诉我我做错了什么吗?我是否没有将数据正确绑定到我的vue模板?
app.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 }')
})
}
}
})
teams-table-template.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();
}
关于javascript - 从过帐请求返回的数据未传递到vue模板,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54240721/