Element Ui の [選択] ドロップダウン ボックスのデフォルト値の初期化に失敗します。

要件: ページが読み込まれるときに、オプションを初期化するときに、[選択] にデフォルトの選択値を指定します。

<el-select v-model="Id" cleatable placeholder="请选择">
    <!-- Id 是需要默认的值  postionArr是从后端获取的可选列表-->
   <el-potion v-for="(item,index) in potionArr" :key="item.id" :label="item.name" :value="item.id">
</el-select>

エラー条件: 対応するオプションにバインドされていません

渡された値はドロップダウン ボックスに割り当てられますが、コンテンツに直接表示されるため、特定のオプションを選択する必要があります。

問題分析: 渡されたデフォルト値が el-potion の値と一致せず、Select が正しく選択できません。

1. オプションの値が選択の部分に存在しません。オプションのリストをコンソールに出力して、データが含まれているかどうかを確認できます。デフォルト値がオプション リストに存在しない場合は、デフォルト値を取得するときにオプション リストをフィルタリングできます。一致するオブジェクトがない場合は、手動で追加できます。

2. 渡した値のタイプがポーション内の値のタイプと一致しているかどうかを確認してください。タイプが一致していない場合、Select が正しく選択できないこともあります。2 つの値の種類を統一する必要があります。

上記 2 つの状況により、Select のデフォルトの選択失敗は基本的に解決できます。