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

Question

我创建了一个表组件来显示一些用户信息。我正在努力为表的各个数据组件生成动态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，因为我最终希望使各个数据组件可编辑。如您所见，我也尝试实现一种方法，但是由于无法传递字符串，该方法也失败了。

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

Answer 1

我认为您正在寻找的东西是这样的：

... :key="obj.attr + \'string\' + variable" ...

工作示例： Sandbox

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h =>
    h(
      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" :key="awsome + \'_\' + index">' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-2">{{relationship.DisplayName}}</td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-1">{{relationship.Relationships.RelationshipDescription}}</td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-2">{{relationship.Addresses.Adress1}}</td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-1">{{relationship.DateOfBirth}}</td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-1">{{relationship.Gender}}</td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-2"><span>{{relationship.SSN | ssnFilter}}</span></td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-1"><span> {{relationship.Phone}}</span></td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-1">{{relationship.Password}}</td>' +
          '<td :id="relationship.DisplayName + \'_\' +index" class="col-md-1 link" ng-click="startEmail(relationship.Email)">{{relationship.Email}}</td>' +
          '<td style="text-align:center;" :id="relationship.DisplayName + \'_\' +index" class="col-md-1">{{relationship.Deceased}}</td>' +
          "</tr>" +
          "</tbody>" +
          "</table>" +
          "</div>",
        methods: {
          getID(str, index) {
            return str + index;
          }
        },
        data() {
          return {
            awsome: "awsome",
            info: [
              {
                DisplayName: "awsome",
                Relationships: { RelationshipDescription: "" },
                Addresses: { Adress1: "" },
                DateOfBirth: "",
                Gender: "X",
                SSN: "asd",
                Phone: "asd",
                Password: "mostsecurepasswordever",
                Email: "",
                Deceased: ""
              }
            ]
          };
        }
      })
    )
}).$mount("#app");