Использование v-for с динамическими ключами в Vuejs - PullRequest
Новая
       11

Использование v-for с динамическими ключами в Vuejs

0 голосов
/ 21 ноября 2018

Я создаю общий компонент таблицы в моем приложении Vuejs примерно так:

Компонент таблицы: 

<template>
    <div>
        <table class="table">
                <thead>
                <tr>
                    <th v-for="item in headers">
                        {{ item }}
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in contents">
                    <th scope="row">
                        {{ index+1 }}
                    </th>
                    <td>
                        {{ item.first_name }}
                    </td>
                    <td>
                        {{ item.last_name }}
                    </td>
                    <td>
                        {{ item.username }}
                    </td>
                </tr>

                </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "table-type-1",
        props: ['contents', 'headers']
    }
</script>

Это будет работать, еслиЯ передаю следующий набор данных в реквизит, что-то вроде этого: 

data() {
    return {
        headers: ['#', 'First Name', 'Last Name', 'Username'],
        contents: [
            { first_name: 'Jhon', last_name: 'Stone', username: '@jhon' },
            { first_name: 'Lisa', last_name: 'Nilson', username: '@lisa' },
            { first_name: 'Larry', last_name: 'the Bird', username: '@twitter' }
        ]
    }
}

Но так как я строю общую таблицу, поэтому мой набор данных может отличаться, иногда это может быть что-то вроде этого: 

data() {
    return {
        headers: ['#', 'Company Name', 'City', 'Turn Over (In Billions)'],
        contents: [
            { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
            { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
            { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
        ]
    }
}

Или могут быть разные конструкции.Для этого я собираюсь передать значение ключей, заданное в моих данных заголовков, которые могут определить, какие ключи представлены в каком столбце, примерно так: 

data() {
    return {
        headers: [
            { title: '#', key: index, },
            { title: 'Company Name', key: 'company_name'},
            { title: 'City', key: 'city'},
            { title: 'Turn Over (In Billions)', key: 'turn_over' }
        ],
        contents: [
            { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
            { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
            { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
        ]
    }
}

Или просто передать переменную ключа: 

data() {
    return {
        headers: ['#', 'Company Name', 'City', 'Turn Over (In Billions)'],
        keys: ['index', 'company_name', 'city', 'turn_over'],
        contents: [
            { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
            { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
            { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
        ]
    }
}

Как мне этого добиться? Или это возможно при таком подходе, где я могу поместить эти ключи в свой элемент v-for?Любые предложения приветствуются.Спасибо.

1 Ответ

0 голосов
/ 21 ноября 2018

Для каждого цикла строки в заголовках извлеките key и получите содержимое по key: 

new Vue({
  el: '#app',
  data: {
    headers: [
        { title: '#', key: 'index' },
        { title: 'Company Name', key: 'company_name'},
        { title: 'City', key: 'city'},
        { title: 'Turn Over (In Billions)', key: 'turn_over' }
    ],
    contents: [
        { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
        { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
        { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
    ]
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>

<div id='app'>
  <table class="table">
    <thead>
      <tr>
        <th v-for="item in headers">
          {{ item.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in contents">
        <th scope="row">
          {{ index+1 }}
        </th>
        <td v-for="{ key } in headers.slice(1)">
          {{ item[key] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>
...