回答編集履歴
3
説明に補足
answer
CHANGED
|
@@ -1,23 +1,34 @@
|
|
|
1
1
|
これだとmethodsのtoggleHeartで、該当店舗を紐付けるものが何も示されていませんので、全店舗が対象となってしまいます。なので、選択した店舗のidを引っ張ってきて、候補の店舗の中から該当する店舗を取得するようにすればいいのではないでしょうか。
|
|
2
2
|
|
|
3
|
+
あと、isActiveがループで制御されている限り、紐付いた値は全部同じ値を返してしまうので、返す値はオブジェクトにして分類しないと駄目な気がします。
|
|
4
|
+
|
|
3
5
|
```vue
|
|
4
6
|
//テンプレート
|
|
5
7
|
<div class="LikesIcon" @click="toggleHeart(shop.id)">
|
|
8
|
+
<i class="fa-heart LikesIcon-fa-heart" :class="{ heart: isActive , fas: isActive ,far: !isActive }">いいね</i>
|
|
9
|
+
<input :value="act[shop.id]"><!-- テスト用 -->
|
|
6
10
|
//省略
|
|
11
|
+
isActive: false,
|
|
12
|
+
act: [], //ここに評価値を代入していく
|
|
13
|
+
shops: [
|
|
14
|
+
//省略
|
|
7
15
|
methods:{
|
|
8
|
-
|
|
16
|
+
toggleHeart(sel_id) {
|
|
17
|
+
let isActive = this.isActive
|
|
18
|
+
let act = this.act
|
|
9
|
-
|
|
19
|
+
this.filteredShops.filter(function(elem,idx){
|
|
10
|
-
//検索店舗と選択店舗のマッチングを確認
|
|
11
|
-
|
|
20
|
+
if(sel_id === elem.id){
|
|
12
|
-
|
|
21
|
+
if (!isActive) {
|
|
13
|
-
|
|
22
|
+
act[sel_id] = true;
|
|
14
|
-
|
|
23
|
+
} else {
|
|
15
|
-
|
|
24
|
+
act[sel_id] = false;
|
|
16
|
-
|
|
25
|
+
}
|
|
17
|
-
|
|
26
|
+
}
|
|
18
|
-
|
|
27
|
+
})
|
|
28
|
+
this.act = act
|
|
19
|
-
|
|
29
|
+
},
|
|
30
|
+
|
|
20
31
|
}
|
|
21
32
|
```
|
|
22
33
|
|
|
23
|
-
動くかどうかは未検証です
|
|
34
|
+
ボタンとテキストボックスでひととおりの動作は検証できたのですが、アイコンでも希望通り動くかどうかは未検証です。
|
2
補足
answer
CHANGED
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
methods:{
|
|
8
8
|
toggleHeart(sel_id) {
|
|
9
9
|
this.filterShop.filter(function(elem,idx){
|
|
10
|
+
//検索店舗と選択店舗のマッチングを確認
|
|
10
11
|
if(elem.id === sel_id){
|
|
11
12
|
if (!this.isActive) {
|
|
12
|
-
this.isActive = true;
|
|
13
|
+
this.isActive = true;
|
|
13
14
|
} else {
|
|
14
15
|
this.isActive = false;
|
|
15
16
|
}
|
1
括弧がなかった
answer
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
methods:{
|
|
8
8
|
toggleHeart(sel_id) {
|
|
9
9
|
this.filterShop.filter(function(elem,idx){
|
|
10
|
-
if(elem.id === sel_id)
|
|
10
|
+
if(elem.id === sel_id){
|
|
11
11
|
if (!this.isActive) {
|
|
12
12
|
this.isActive = true;
|
|
13
13
|
} else {
|
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
}
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
動くかどうかは未検証ですが、こんな感じで制御すればいけるのでは？
|
|
22
|
+
動くかどうかは未検証です（似たようなシステムは作成したことがあります）が、こんな感じで制御すればいけるのでは？
|