要素選択ドロップダウン・ボックスの単一選択と複数選択の切り替えは、このバグが原因である。

問題の説明

最近、Elementuiコンポーネントを使用して、管理の背景を記述します。検索セクションで 、 作業指示の異なるタイプに応じて動的に次の検索オプションを切り替える必要があります 、 コンテンツのいくつかは複数選択されているいくつかは単一選択されています 。

作業指示の種類を常に切り替えていると、エラーが報告されました。エラーはおそらく次のようなものでしょう。

これは内部要素のエラーのようなので、ググってソースコードを見てみました。一般的な考え方は、selectコンポーネントがradioとmulti-selectを切り替えるときに文字列から配列に切り替わっているということです。

<div v-if="obj.key === 'RA"> 
...//様々なフォーム・コンポーネント
</div>
<div v-else-if="obj.key === 'FA"> 
...//様々なフォームコンポーネント
</div>
<div v-else-if="obj.key === 'RQM"> 
...//様々なフォームコンポーネント
</div>

もう一度調べてみたら、vueのスタイルガイドにこんなことが書いてありました。

さて、今回私が遭遇したのは、彼が言っていた予想外の結果だったようです。そして、作業指示の種類を切り替えたときに、selectコンポーネントのradio-multipleの選択状態が変化することを調べてみたところ、vueは確かに何かを再利用していました。

これで問題が特定できたので、ドキュメントにキーを追加できます。以下のようになります。

<div v-if="obj.key === 'RA" key="RA"> 
...//様々なフォーム・コンポーネント
</div>
<div v-else-if="obj.key === 'FA" key="FA"> 
...//様々なフォームコンポーネント
</div>
<div v-else-if="obj.key === 'RQM" key="RQM"> 
...//様々なフォームコンポーネント
</div>

一度テストしてみてください。