javascript - post请求返回的数据未传递到vue模板

Question

我有一个由 post 请求(名为 get_teams 的方法)触发的返回数据，该数据未传递到我的 vue 模板。有人能告诉我我做错了什么吗？我是否没有将数据正确绑定(bind)到我的 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>

Answer 1

我认为 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();
}