エコー後に要素編集フォームel-radioが選択できない問題を解決します

序文

この記事の内容は私がこの業界に入ったときのメモを元にしているため、非常に基礎的な内容であり、初心者向けであることをあらかじめ指摘しておきます。専門家の皆様、時間を無駄にしないために迂回してください、ありがとうございます〜

今日は、element-ui 編集フォームの el-radio がエコー後に選択できない問題についてお話しします。これは主に、vue の双方向バインディングと element-ui 編集フォームの el-radio のデフォルト タイプに関係しています。

質問

これは午前中半分悩まされたバグです。フォームのスタイルとコードは次のとおりです。

問題は、データがエコーされた後、他のラジオをクリックして何かを選択しても、それをチェックできないことです。

オンラインで同じ問題とその解決策を見つけましたが、原因はまだ見つけられませんでした。

オンラインソリューション

元々、バックグラウンドから取得したデータ res.data は editPowerForm に直接割り当てられていました。ここで、まず res.data を let obj に割り当て、次に obj を editPowerForm に割り当てる必要があります。

理由は、editPowerForm が変数 radio を宣言していないためです。Vue での双方向データバインディングのサポートは、基本的な追加と削除の方法に限られています。詳細については、公式サイトを参照してください。ここでは、宣言されていない変数に値を直接割り当てることと同じなので、双方向バインディングは Vue によってリッスンされず、つまり更新は行われません。最初に obj に値を割り当てることは、値を割り当てる前にラジオを宣言することと同じなので、双方向バインディングによってリッスンできます。

少しわかりにくいですが、簡単に言うと、Vue の双方向バインディングでリッスンできるようにするには、まずオブジェクトの特定の属性を作成する必要があります。

また、次の点にも注意してください。

ラジオの値は、デフォルトで文字列型である必要があります。バックグラウンドによって返される値が int 型の場合、ラジオはデフォルトで選択されません。

ご存知のとおり、js オブジェクトを参照する場合、参照されるのは実際にはインデックス アドレスです。フロント エンドがディープ コピーとシャロー コピーを拡張するのはそのためです。オブジェクト内でのみ変更が発生した場合、インデックス値は実際には変更されません。つまり、インデックスは同じオブジェクトを指しているため、古い値と新しい値は同じです。

実際、詳細な監視のために $set または watch を直接使用することも可能です。幸いなことに、vue3 ではプロキシを使用して双方向バインディングを実装しているため、配列/オブジェクトの変更を監視できないという問題を心配する必要がなくなりました。

el-radio echo の要素編集フォームが選択できない問題を解決する方法についての記事はこれで終わりです。el-radio echo が選択できないことに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。