Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用してgetまたはpostリクエストを送信します。リクエストを送信するときは、jsを使用する必要があります。 リクエストパラメータを走査して処理します。 応答を受信すると、応答結果を走査して処理する必要があります。 Vue と JS の foreach 配列の違いに注意してください。 成し遂げるjs で配列を反復処理する //シフトの詳細配列を定義します var bcglxiangxiList = new Array(); //シフト詳細オブジェクトを定義します var bcxiangxi = {}; // パラメータをループする bcglXiangXiListParam.forEach(element => { bcxiangxi.xh = 要素.xh; bcxiangxi.bcbh = データ.bcbh; bcxiangxi.dkkssj = 要素.sjfw[0]; bcxiangxi.dkjssj = 要素.sjfw[1]; bcxiangxi.ts = 要素.ts; bcxiangxi.dkdd = 要素.dkdd; bcxiangxi.zxjxljsj = 要素.jxsjfw[0]; bcxiangxi.zdjxljsj = 要素.jxsjfw[1]; //シフト詳細オブジェクトをシフト詳細配列に格納します bcglxiangxiList.push(bcxiangxi); }); Vue で配列を反復処理する var bcglxiangxiList = 新しい配列(); var bcxiangxi = {}; デバッガ; もし ( 応答.data.bcglXiangXiList != null && 応答.data.bcglXiangXiList.長さ > 0 ){ console.log(応答データ.bcglXiangXiList); response.data.bcglXiangXiList.forEach((item, index) => { console.log(アイテム); bcxiangxi.xh = アイテム.xh; bcxiangxi.bcbh = アイテム.bcbh; //デバッガ bcxiangxi.sjfw = 新しい配列(); bcxiangxi.sjfw[0] = アイテム.dkkssj; bcxiangxi.sjfw[1] = アイテム.dkjssj; bcxiangxi.ts = アイテム.ts; bcxiangxi.dkdd = アイテム.dkdd; bcxiangxi.jxsjfw = 新しい配列(); bcxiangxi.jxsjfw[0] = アイテム.zxjxljsj; bcxiangxi.jxsjfw[1] = アイテム.zdjxljsj; bcglxiangxiList.push(bcxiangxi); }); } トラバーサルメソッドは同じであることがわかります。js では、2 つのパラメータを持つトラバーサルメソッドを使用することもできます。 //シフトの詳細配列を定義します var bcglxiangxiList = new Array(); //シフト詳細オブジェクトを定義します var bcxiangxi = {}; // パラメータをループする bcglXiangXiListParam.forEach((element,index) => { bcxiangxi.xh = 要素.xh; bcxiangxi.bcbh = データ.bcbh; bcxiangxi.dkkssj = 要素.sjfw[0]; bcxiangxi.dkjssj = 要素.sjfw[1]; bcxiangxi.ts = 要素.ts; bcxiangxi.dkdd = 要素.dkdd; bcxiangxi.zxjxljsj = 要素.jxsjfw[0]; bcxiangxi.zdjxljsj = 要素.jxsjfw[1]; //シフト詳細オブジェクトをシフト詳細配列に格納します bcglxiangxiList.push(bcxiangxi); }); vue forEach ループの使用法//データはコレクションです data.forEach(function(item, index) { //item はその日にループされるオブジェクトです //index は 0 から始まるループ インデックスです}) 上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysql トランザクション分離レベルの読み取りコミットの詳細な説明
>>: Linux の grep コマンドと egrep コマンドの詳細な説明
目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...
目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...
1. 親コンポーネントは props を使用して子コンポーネントにデータを渡すことができます。 2....
この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...
基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...
この記事では、MySQL 8.0.12解凍版のインストールチュートリアルを参考までに紹介します。具体...
1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...
CDN(コンテンツ配信ネットワーク)を通じて参照できます。 jQuery は Google と Mi...
1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...
Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...
実際のプロジェクト開発では、多数のクエリや挿入、特にマルチスレッド挿入など、データベースに大きな負荷...
目次1. 脱構築とは何か? 2. 配列の分割3. 配列モードと代入モードの統一4. デフォルト値の構...
目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
Mac システムには PHP と Apache が付属していますが、必要なバージョンではない場合があ...