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設置為索引，而是將其設置為（“name”+ index）fe

由於模板是字符串，因此我沒有找到一種方法來完成屬性和字符串之間的連接。 我需要生成動態ID，因為我希望最終使各個數據組件可編輯。 正如你所看到的，我也試圖實現一個方法，但也失敗了，因為我無法傳遞字符串。

任何幫助和建議將不勝感激！

Answer 1

我認為你在尋找的是：

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

工作示例： 沙箱

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