Vue エラー: リストのレンダリングに v-for を正しく使用できません。解決方法は?

Vue エラー: リストのレンダリングに v-for を正しく使用できません。解決方法は?

Vue を開発に使用する場合、リストのレンダリングに v-for 命令を使用する必要がある状況によく遭遇します。ただし、リストのレンダリングに v-for を正しく使用できないという問題が発生する場合があり、リスト データを正常に表示するには、この問題を解決する必要があります。

1. データ ソースを確認します
まず、データ ソースが正しいかどうかを確認する必要があります。 Vue では、v-for ディレクティブは配列を走査することによってリストをレンダリングします。したがって、走査したいデータ ソースが配列であること、およびレンダリングされるデータに正常にアクセスできることを確認する必要があります。データ ソースが正しくない場合、v-for ディレクティブは正しく機能しません。

たとえば、list という名前の配列があります:

data() {
  return {
    list: [
      { name: '张三', age: 18 },
      { name: '李四', age: 20 },
      { name: '王五', age: 22 }
    ]
  }
}

リスト レンダリングのテンプレートで v-for ディレクティブを使用できます:

<ul>
  <li v-for="item in list" :key="item.name">{{ item.name }}</li>
</ul>

If データ ソース Ifリストが正しくない場合、リストは正常に表示されません。

2. キーの一意性を確認する
リストのレンダリングに v-for ディレクティブを使用する場合、レンダリングされる要素ごとに一意のキーを指定する必要があります。このキーは、Vue がリスト diff アルゴリズムを実行して、各リスト項目が変更されたかどうかを判断するのに役立ちます。

各リスト項目に一意のキーを指定しない場合、Vue は警告メッセージを表示し、リストが正しく表示されない可能性があります。

たとえば、item.name を唯一のキーとして使用できます。

<ul>
  <li v-for="item in list" :key="item.name">{{ item.name }}</li>
</ul>

キーに一意の値を指定しない場合、リストは正しく表示されません。

3. v-for の使用位置を確認する
v-for 命令の使用位置が正しいかどうかも確認する必要があります。 Vue では、v-for ディレクティブはリストのレンダリングに使用されるため、<ul>、<ol>## など、要素をレンダリングできる場所で使用する必要があります。 #、

<div v-for="item in list" :key="item.name">{{ item.name }}</div>

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}