javascript - 无法将 Prop 传递给组件的数据

Question

我试图将组件中的 Prop 传递给同一组件的数据对象。但是，我只会得到空值。谁能建议我应该如何处理这个问题？看来我的 vue 组件无法在初始渲染/加载时获得 Prop 。

    const teamInformationTemplate = {
    template:
    `
<div class="col-lg-6 col-md-12">
    <div class="card card">
        <!---->
        <div class="card-header">
            <h6 class="title">
                TEAMS 
            </h6>
            <br>
            <select id="select_model_version" @change="get_team_information($event.target.value)" class="form-control form-control-sm form-group col-md-4">
                <option v-for="team in teams" :value="team.team_id" :key="" :id="team.team_id">
                    {{ team.team_name }}
                </option>
            </select>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table tablesorter">
                    <thead class="text-primary">
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody class="">
                        <tr v-if="team_members!=null" v-for="(member, index) in team_members">
                            <td>{{index+1}}</td>
                            <td>{{member.firstname}}
                        </tr>
                    </tbody>
                </table>
            </div>
        <!---->
        <!---->
        </div>
    </div>
</div>
    `,
    props: ['teams', 'team_members', 'team_name'],
    data() {
        return {
            template_teams : this.teams,
            template_team_name : this.team_members,
            template_team_members : this.team_name,
        }
    },
    methods: {
        get_team_information : function (team_id) {
            $.post(js_local.ajaxurl, {
                action: 'abcdefg',
                team_id: team_id
            }).done((data) => {
                let parsed_data = JSON.parse(data)
            }).fail(function (data) {
                console.log('fail @ { action : get_team_information }', data)
            })
        }
    }
}

Answer 1

尝试在 updated 钩子(Hook)中初始化它们，如下所示:

data() {
    return {
      template_teams: [],
      template_team_name: [],
      template_team_members: [],
    }
  },
  updated() {
    this.template_teams = this.teams;
      this.template_team_name = this.team_members;
    this.template_team_members = this.team_name;
  }