JavaScript - 複数の div を持つ v-for に :key を追加する方法

HTML 要素なしで v-for ループを作成したいので、親として <template を使用することにしました。このループに :key を割り当てる方法がわかりません。テンプレートやループ内のすべての div に割り当てることはできません。何かアイデアはありますか?

<template
  v-for="{ id, text, option, percentage, value } in reports"
>
  <div class="table-row__index">
    {{ id }}
  </div>
  <div class="table-row__title">
    <p>{{ text }} - <strong>{{ option }}</strong></p>
  </div>
  <div class="table-row__info">
    {{ percentage }}%
  </div>
  <div class="table-row__info">
    {{ value }}
  </div>
</template>

これは良い習慣ではないと思います。常にテンプレートタグ内に 1 つの親要素を配置し、その中にすべての HTML を含める必要があります。この方法で実行しない具体的な理由はありますか?

– ヴィプル

2020 年 9 月 3 日 12:38

display: Grid と Grid-template-columns を持つ親 div があります。そのため、テンプレートに要素を 1 つも追加できません

– クイッペ

2020 年 9 月 3 日 12:53

わかりました。次に、要素ごとに実行する必要があります。

– ヴィプル

2020 年 9 月 3 日 13:14

------------------------

良い習慣として、常に p を含める必要があります。内部に要素はありません。ただし、制約により、公式ドキュメントに記載されているように、テンプレートで for ループを使用しても問題ありません。

https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

この場合、キーは子要素/コンポーネントに追加する必要があり、これが公式に推奨されている方法です。

この例を参照して、div の内部テンプレートにキーを追加してください。

new Vue({
    el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="n in 5">
    <span :key="'number' + n">{{ n }}</span>
    <span :key="'dot' + n">. </span>
  </template>
</div>

2020 年 9 月 3 日 13:30 に回答

ヴィプル

ヴィプル

1,283

6 個

銀バッジ 6 個

12 個

銅バッジ 12 個

0

------------------------

テンプレートに for ループを含めることはできません。 for ループ ディレクティブは、テンプレート内の最初の子コンポーネント (またはルート コンポーネント) 内にのみ含めることができます。

ループをレンダリングする方法の例を次に示します。

<template>
  <div class="cant-have-for-loop-this-is-the-root-component">
    <div v-for="{ id, text, option, percentage, value } in reports" :key="{id}">
        <div class="table-row__index">
          {{ id }}
        </div>
        <div class="table-row__title">
        <p> {{ text }} - <strong>{{ option }}</strong></p>
        </div>
        <div class="table-row__info">
            {{ percentage }}%
        </div>
        <div class="table-row__info">
            {{ value }}
        </div>
    </div>
  </div>
</template>

これは、ためらうことなくスムーズに実行されます。このスクリーンショットに示されているように、スタイルなしでレンダリングされます。

これがあなたが達成したいことの答えになることを願っています。

2

いいえ、余分な div を追加することはできません。これによりレイアウトが損なわれてしまいます

– クイッペ

2020 年 9 月 3 日 13:51

ボーダーボックスを表示するだけでは、Vue でやりたいことはできません

– mトレブランカ

2020 年 9 月 3 日 13:58