Динамические идентификаторы Vue.JS в шаблоне компонента - PullRequest
Новая
       11

Динамические идентификаторы Vue.JS в шаблоне компонента

0 голосов
/ 15 марта 2019

Я создал компонент таблицы для отображения некоторой пользовательской информации. Я борюсь с созданием динамических идентификаторов для отдельных компонентов данных таблицы. Я новичок в 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);
        }
    }
})

Вместо установки идентификатора в индекс, который я хотел бы установить, ("имя" + индекс), т. Е.

Из-за того, что шаблон является строкой, я не нашел способа выполнить это объединение между атрибутом и строкой. Мне нужно будет генерировать динамические идентификаторы, потому что я хотел бы в конечном итоге сделать отдельные компоненты данных редактируемыми. Как вы можете видеть, я также пытался реализовать метод, но он также не удался, потому что я не мог передать строку.

Любая помощь и предложения будут высоко оценены!

1 Ответ

0 голосов
/ 15 марта 2019

Я думаю, что вы ищете что-то вроде: 

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