Возвращенные данные из почтового запроса не переданы в шаблон Vue

Question

У меня есть возвращенные данные, сгенерированные почтовым запросом (метод get_teams), который не передается моему шаблону vue. Я новичок в VueJS, кто-нибудь может посоветовать, что я сделал не так? Я неправильно привязываю данные к моему шаблону 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 }')
            })

          }
        }
 })

команды-столовые 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

Использование обратного вызова, как вы делаете, вызовет некоторые ошибки, поэтому я рекомендую использовать функции-стрелки ()=>{...} вместо function(){...} в качестве обратного вызова, так как вы теряете контекст this:

get_teams : function(){
    this.reset_show('get_teams')
    $.post(js_local.ajaxurl,{
        action:'get_advisor_teams'
    }).done((data) => {
        this.teams = data
        this.show_teams = true
        console.log(this.teams)
    }).fail(function(data){
        console.log('fail @ { action : get_advisory_teams }')
    })

  }

или путем присвоения this глобальной переменной с именем that и использования ее в контексте обратного вызова:

      get_teams : function(){
        this.reset_show('get_teams')
        let that=this; 
        $.post(js_local.ajaxurl,{
            action:'get_advisor_teams'
        }).done(function(data){
            that.teams = data
            that.show_teams = true
            console.log(that.teams)
        }).fail(function(data){
            console.log('fail @ { action : get_advisory_teams }')
        })

      }

Answer 2

Я думаю, 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();
}