VUEリストにデータ要求には、属性がfalseを追加した後、問題の解決策には割り当てません

データ(){ 
        リターン{ 
            リスト:[ //属性値FALEを追加 
            ]、
            //テストデータ
            goList:[ 
                { 
                    名: 'ジョン・ドウ'、
                    電話:'18、621958665' 
                }、
                { 
                    名: 'ジョン・ドウ'、
                    電話:'18、621958665' 
                }、
                { 
                    名: '張ER'、
                    電話:'18、621958665' 
                }、
                { 
                    名: '李呉'、
                    電話:'18、621958665'
                }
                
                
            ]、
            routerList:[] 
        } 
    }、

  

//データ要求
getAjax(){ 
            CONST = _thisこの
            // _this.postRequest( ''、{}関数(データ){ 
            //はconsole.log(データ、 '111')
            // IF(データ){ 
            // Data.Map(ヴァル=> { 
            falseに// = val.check; 
            // _this.list.push(ヴァル)
            //})
            //他{} 
            $ // _thisトースト({。
            //メッセージ:「を選択してください人間の使用' 
            // DURATION:2000、
            //クラス名:' 'noticeErrorToast 
            )} //;
            } //
            } //)

           _this.goList.map(ヴァル=> { 
                        val.check = falseに;    //属性が追加 
                        _this.list.push(ヴァル)
            })
        }、

  

//クリック選択し切り換える
        goChecked(項目、インデックス){ 
            この_thisのconst =; 
            // 2番目
            。//この$セット(!項目を 'チェック'、item.check)//未定義の直接真に変換

            //最初の種
            item.check = item.check;!
            this.list.splice(インデックス,. 1、項目);    //変更は、直流電流をオフにしていますが、交換する 
            IF(item.check){ 
                this.routerList.push(アイテム)
            他{} 
                this.routerList.splice(インデックス,. 1)
            } 
            にconsole.log(this.routerListは)     //選択された現在の値を取得 
        }

  複数選択ボタンのクリックイベントのHTML:

<セクションクラス= "registrationList"> 
           <ulのV-のための"リストの中(項目、インデックス)" =:キー= "インデックス"> 
               の<div> 
                   <IMG SRC =」.. / .. / .. / .. /静的/ IMG /ショー/ checkedImg.png 'V-IF = "item.check" @クリック= 'goChecked(アイテム、インデックス)'/> 
                   <IMG SRC =' .. / .. / .. / .. /静的/img/show/noneChecked.png」V-IF = "!item.check" @クリック= 'goChecked(アイテム、インデックス)' /> 
               </ div> 
               <divの@ = "goEdit"をクリックしてください> 
                    <LIクラス=」 firstLi "> {{item.name}} </ LI>    
                    <LIクラス=" secondLi "> {{item.phone}} </ LI>   
               </ DIV> 
                 
           </ UL> 
      </ section>の

  CSS:

.registrationList { 
    幅:100%。
    ボックスサイズ:ボーダーボックス; 
    パディング:20ピクセル20ピクセル20ピクセル0; 
} 
.registrationList UL { 
  幅:100%。
  ボックスサイズ:ボーダーボックス; 
  パディング:20ピクセル0; 
  border-bottom:1pxの固体#f5f5f5; 
  表示:フレックス。
} 
.registrationList UL DIV:第一の型{ 
    ディスプレイ:曲がります。
    正当化-コンテンツ:センター; 
    ALIGN-アイテム:センター; 
    マージン右:20ピクセル; 
} 
.registrationList李{ 
   幅:100%。
   ボックスサイズ:ボーダーボックス; 
   行の高さ:は50px; 
   テキスト整列:左; 
} 
.registrationList IMG { 
    垂直整列:中央;
    幅:36px; 
    高さ:36px; 
} 
.firstLi { 
    フォントサイズ:34px; 
    色:ブラック。
} 
.secondLi { 
    フォントサイズ:28px; 
    フォントファミリ:PingFangのSC。
    フォント重量:400; 
    色:RGBA(153,153,153,1)。
}

  

おすすめ

転載: www.cnblogs.com/panax/p/11793317.html