ホームページ > ウェブフロントエンド > jsチュートリアル > vue.js で動的にバインドされたラジオ リストをバッチ編集する方法

vue.js で動的にバインドされたラジオ リストをバッチ編集する方法

亚连
リリース: 2018-06-04 10:48:55
オリジナル
2057 人が閲覧しました

ここで、vue.js を使用して動的にバインドされたラジオ リストをバッチ編集する方法に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

各質問にバインドされた質問構造は次のような json オブジェクトです。オプションが動的に追加されるたびに、vue インスタンスの配列オブジェクトに追加されます。

vm.options.push({ id: "", text: "新选项", checked: false });
ログイン後にコピー

次に、ラジオまたはチェックボックスのコレクション リストを追加します。ここでは textarea コンテナを使用します。textare の各行は 1 つのデータであり、その内部は改行によって区別されます (ブレークワードの自動行折り返しはカウントされません)。テキスト配列は次のように取得されます:

var contents = $("#optionsArea").val().split("\n");
ログイン後にコピー

配列を取得します。これは単なるテキスト配列ですが、動的にバインドするラジオ リストは json オブジェクトなので、テキスト配列を vue バインディングと一致する形式に変換します。

まず配列をクリアします:

vm.options.length = 0;
ログイン後にコピー
次に、テキスト配列を vue バインディングに必要なデータ構造にマップします:

vm.options = contents.map(function (item, index, arr) { 
 return { 
 id: "", 
 text: item, 
 checked: false 
 } 
});
ログイン後にコピー
上記は私がまとめたものです。将来、皆さんのお役に立てれば幸いです。 。 関連記事:

写真をトリミングしてサーバーにアップロードする機能をvueに実装する方法

easyuiの日付と時刻ボックスのIE互換性の実際的な問題を解決する方法(詳細なチュートリアル)

説明不変で詳細に反応する実践的なスキル

以上がvue.js で動的にバインドされたラジオ リストをバッチ編集する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート