Vue監聽一個數組id是否與另一個數組id相同的方法
阿新 • • 發佈：2018-11-11
資料list，結構為[{id:1,…},{id:2,…}]，資料shoplist，結構為[{id:1,…},{id:2,…}]，判斷當shoplist.id等於list.id時顯示list的資料。
.vue檔案：
前端精品教程：百度網盤下載
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template>
<div class=
"hello"
>
<div class=
"shoplist"
>
<button @click="clickButtonShopList"
>click me</button>
<span>shoplist-id:</span><input type=
"text"
v-model=
"shoplist[shopCount].id"
>
</div>
<div class=
"list"
>
<button @click=
"clickButtonList"
>click me</button>
<span>list-id:</span><input type=
"text"
v-model=
"list[listCount].id"
>
</div>
<input class=
"data"
v-model=
"data"
>
<h2>{{list}}</h2>
<h2>{{shoplist}}</h2>
</div>
</template>
|
.js檔案：
前端精品教程：百度網盤下載
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
export
default
{
data () {
return
{
msg:
'Welcome to Your Vue.js App'
,
shopCount:0,
listCount:0,
data:
''
,
list:[{id:1,name:
'hello'
},{id:2,name:
'hello'
},{id:3,name:
'hello'
},{id:4,name:
'hello'
},{id:5,name:
'hello'
}],
shoplist:[{id:1,name:
'hello'
},{id:2,name:
'hello'
},{id:3,name:
'hello'
},{id:4,name:
'hello'
},{id:5,name:
'hello'
}]
};
},
methods:{
clickButtonShopList:
function
() {
this
.shopCount++;
this
.shopCount=
this
.shopCount%
this
.shoplist.length;
this
.getData();
},
clickButtonList:
function
() {
this
.listCount++;
this
.listCount=
this
.listCount%
this
.list.length;
this
.getData();
},
getData:
function
() {
this
.data=
''
;
if
(
this
.shoplist[
this
.shopCount].id===
this
.list[
this
.listCount].id){
// this.data=this.list;
this
.data=
this
.list.map((element)=>{
return
element.id+element.name;
}).join(
','
)
}
else
{
this
.data=
''
;
}
}
},
mounted:
function
(){
this
.getData();
}
}
|
.less檔案：
?| 1 2 3 4 5 6 7 8 9 10 |
.list{
margin-top: 20px;
}
.data{
width: 500px;
height:200px;
border: 1px solid
#666666;
margin-top: 20px;
}
|
效果：
剛開始時：
前端精品教程：百度網盤下載
兩邊id不同時：
通過點選使得兩邊id相同時：
前端精品教程：百度網盤下載
