组件模板中的 Vue.JS 动态 ID

【问题标题】：Vue.JS dynamic ID's within a component template组件模板中的 Vue.JS 动态 ID
【发布时间】：2019-08-06 21:12:32
【问题描述】：

我创建了一个表格组件来显示一些用户信息。我正在努力为表的各个数据组件生成动态 ID。我是 vue 新手，在网上找不到这个。

这是我的组件。

 Vue.component('relationship-data',{
    props: ['info'],
    template: '<div id="relationhsipsTable" class = "container-fluid tab-content col-md-12" style="padding: 0px;">'+  
    '<table class="table table-hover table-striped table-condensed" id="customerRelationshipsTable">'+
        '<thead id="customerRelationshipsTableHeader">'+
            '<tr>'+
                '<th id="customerRelationshipsTableHeaderName" class="col-md-2 cursor-pointer" >'+
                    'Name'+

                '</th>'+
                '<th id="customerRelationshipsTableHeaderRelationship" class="col-md-1 cursor-pointer">'+
                    'Relationship'+

                '</th>'+
                '<th id="customerRelationshipsTableHeaderAddress" class="col-md-2 cursor-pointer">'+
                    'Address'+
                '</th>'+
                '<th id="customerRelationshipsTableHeaderDOB" class="col-md-1 cursor-pointer">'+
                    'DOB'+

                '</th>'+
                '<th id="customerRelationshipsTableHeaderGender" class="col-md-1 cursor-pointer">'+
                    'Gender'+

                '</th>'+
                '<th id="customerRelationshipsTableHeaderSSN" class="col-md-2 cursor-pointer">'+
                    'SSN'+

                '</th>'+
                '<th id="customerRelationshipsTableHeaderPhone" class="col-md-1 cursor-pointer">'+
                    'Phone'+

                '</th>'+
                '<th id="customerRelationshipsTableHeaderPassword" class="col-md-1 cursor-pointer">'+
                    'Password'+

                '</th>'+
                '<th id="customerRelationshipsTableHeaderEmail" class="col-md-1 cursor-pointer">'+
                    'Email'+

                '</th>'+
                '<th style="text-align:center;" id="customerRelationshipsTableHeaderDeceased" class="col-md-1 cursor-pointer">'+
                    'Deceased'+

                '</th>'+
            '</tr>'+
        '</thead>'+
'<tbody id="customerRelationshipsTableBody">'+

    '<tr v-for="(relationship, index) in info">'+
        '<td :id=index" class="col-md-2">{{relationship.DisplayName}}</td>'+
        '<td :id="index" class="col-md-1">{{relationship.Relationships.RelationshipDescription}}</td>'+
        '<td :id="index" class="col-md-2">{{relationship.Addresses.Adress1}}</td>'+
        '<td :id="index" class="col-md-1">{{relationship.DateOfBirth}}</td>'+
        '<td :id="index" class="col-md-1">{{relationship.Gender}}</td>'+
        '<td :id="index" class="col-md-2"><span>{{relationship.SSN | ssnFilter}}</span></td>'+
        '<td :id="index" class="col-md-1"><span> {{relationship.Phone}}</span></td>'+
        '<td :id="index" class="col-md-1">{{relationship.Password}}</td>'+
        '<td :id="index" class="col-md-1 link" ng-click="startEmail(relationship.Email)">{{relationship.Email}}</td>'+
        '<td style="text-align:center;" :id="index" class="col-md-1">{{relationship.Deceased}}</td>'+
    '</tr>'+
'</tbody>'+
    '</table>'+
'</div>',
    methods:{ getID(str, index) {
        return (str + index);
        }
    }
})

我不想将 id 设置为 index，而是将其设置为 ("name" + index) f.e.

由于模板是一个字符串，我还没有找到一种方法来完成属性和字符串之间的这种连接。我需要生成动态 ID，因为我希望最终使各个数据组件可编辑。如您所见，我也尝试实现一个方法，但也失败了，因为我无法传递字符串。

任何帮助和建议将不胜感激！

【问题讨论】：

• 你不想要'multiline strings 将使您的代码更简单
• 转义字符不起作用。它仍然呈现相同的
• 使用转义的工作示例：codesandbox.io/s/4686m09k7
• @Estradiaz，似乎转义单个刻度有效（ ' ）并且转义双引号由于某种原因不起作用。
• 完全正确 ;) 但不是出于某种原因 - 双引号被解析并解释为它们的本来面目：vue 模板中赋值的结尾 ^^