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

Question

I have created a table component for displaying some user information. I am struggling with generating dynamic ID's for the individual data components of the table. I am new to vue, and could not find this online.

Here is my component.

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

Rather than setting the id to index I would like to set it to, ("name" + index) fe

Due to the template being a string I have not found a way to accomplish this concatenation between an attribute and a string. I will need to generate dynamic ID's because I would like to eventually make the individual data components editable. As you can see I also tried to implement a method, but that failed as well because I could not pass the string.

Any help and suggestions would be much appreciated!

Answer 1

I think what you are looking for is something like:

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

working example: 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");