vue コンポーネントの v for コマンドの概要と、v-for 使用時のアラーム問題の分析

v-for の基本的な使用法は、v-for="item in list" または v-for="item of list" であることはわかっています。この記事では、v-for を使用する際のアラームの問題を解決する方法を主に紹介します。 vue コンポーネントについては、この記事で v for コマンドを紹介しましたので、必要な方は参考にしていただければ幸いです。

プロジェクトで v-for コードセグメントを実行するとき、

<flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> 
  <flexbox-item v-for="role in roles " > 
    <x-button mini :type="role.type" style="padding: 0 14px" @click.native="btnClick(role.action)">{{role.value}}</x-button> 
  </flexbox-item> 
</flexbox> 
<flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;">
  <flexbox-item v-for="role in roles " >
    <x-button mini :type="role.type" style="padding: 0 14px" @click.native="btnClick(role.action)">{{role.value}}</x-button>
  </flexbox-item>
</flexbox>出现告警：component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

解決策:

次のように、解決できるコード内のキー値をバインドします。

PS: Vue2 学習メモ: 説明用

1.

<flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> 
  <flexbox-item v-for="(role,index) in roles " :key="index" > 
    <x-button mini :type="role.type" style="padding: 0 14px" @click.native="btnClick(role.action)">{{role.value}}</x-button> 
  </flexbox-item> 
</flexbox>

を使用します。結果:

概要

の問題の解決についてvue コンポーネントで v- を使用する for にアラームの問題があります。ご質問があればメッセージを残してください。編集者がすぐに返信します。
関連する推奨事項:

Vue.js の共通命令 - v-for 命令のループに関するチュートリアル

vue.js 命令 v-for の使用法とインデックスの取得

Vue.js の共通命令の概要 (v- if 、v-for など)

以上がvue コンポーネントの v for コマンドの概要と、v-for 使用時のアラーム問題の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。