使用vuejs獲取兩個陣列id，如果某一個陣列id成功匹配另一個陣列內id，那麼就勾選

FLTmiao發表於2017-12-08
VueJS陣列

這篇文章是使用vuejs獲取陣列，其中一個陣列裡麵包含全部的數值，另一個陣列只有一部分數值，要做的就是第二個陣列去匹配第一個陣列，匹配相同的情況下，給這個相同的數值打上鉤，如下圖


專案地址：https://github.com/fengliting/vue-array，後續程式碼解說就不會全部都打上


html是遍歷全部的陣列

<li v-for="item in arr1" >
<div class="checkbox">
<label>
<!--value存在於v-model裡面的話，checkbox會自動勾選-->
<input class="chk_1" type="checkbox" @click="choseitem($event.target.value)" v-model="indexs" :value="item.id">
{{item.value}}
</label>
</div>
</li>

js程式碼
//全部
var list1 = [{value:'Mary',id:1},{value:'Away',id:2},{value:'Ali',id:3},...]
//只存在一部分的陣列

var list2 = [{value:'Mary',id:1},{value:'Away',id:2},{value:'Neinei',id:8},...]

//獲取第二個陣列裡面的物件

getarrayitem:function(){

this.indexs = this.list2.map(function(json){

return json.id

})

}

//選中的值判斷是否在第二個陣列中

choseitem:function(inputid){

//this.isArr是判斷某一個值是否在陣列中，可以用原生js實現，也可以使用jquery實現，這裡就不貼這個程式碼了

if(this.isArr(inputid,this.indexs){

console.log("存在第二個陣列內")

})

console.log("不存在第二個陣列中")

}


相關文章