无法将道具传递给组件的数据

Posted 2023-02-23

【中文标题】无法将道具传递给组件的数据

【英文标题】：not able to vue pass props to component's data

【发布时间】：2019-06-30 16:50:21

【问题描述】：

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

    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)
            )
        
    

【参考方案1】：

尝试在updated钩子中初始化它们，如下所示：

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;