編集履歴

質問編集履歴

neko_daisuki様のご回答を参考に修正したコードです。

2020/11/23 09:38

投稿

alpaca540

スコア18

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -193,3 +193,257 @@
 v-bind:key="item.id"でボタンも個別に変更できるかと思ったのですが、他のボタンも変わってしまいます
+### （11/23修正）neko_daisuki様のご回答を参考に修正したコードです。
+```html
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <link rel="stylesheet" media="all" type="text/css" href="css/destyle.css" />
+    <link rel="stylesheet" media="all" type="text/css" href="css/flex.css">
+    <link rel="stylesheet" media="all" type="text/css" href="css/search.css">
+    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
+<title>SEARCH</title>
+<style>
+    .active{
+        color: red;
+    }
+</style>
+</head>
+<body>
+ <div id="container">
+<br>
+    <div id="app">
+        <item-list></item-list>
+    </div><!-- app -->
+</div><!-- container -->
+<script src="js/flowers.js"></script>
+<script src="js/main.js"></script>
+</body>
+</html>
+```
+```js
+var app = new Vue ({
+    el: "#app",
+});
+```
+```js
+Vue.component ('item-list', {
+    template: `
+        <div>
+        <section class="flex">
+            <ul class="flex__list">
+                <li class="flex__item246" v-for="item in items" v-bind:key="item.id" >
+                    <img v-bind:src="item.img">
+                    <p class="white">{{ item.anotherword }}</p>
+                    <p>{{ item.name }}</p>
+                    <button v-on:click="addfavorites(item.id)" v-bind:class ="{active: isActive(item.id)}"><i class="far fa-heart"></i></button>
+                </li>
+            </ul>
+        </section>
+        <section class="flex">
+        <p>My favorites</p>
+            <ul class="flex__list">
+                <li class="flex__item246" v-for="(item, index) in favorites" v-bind:key="item.id" >
+                    <img v-bind:src="item.img">
+                    <p>{{ item.name }}</p>
+                    <button @click="delfavorites(index)" v-bind:class ="{active: isActive(item.id)}"><i class="far fa-trash-alt"></i></button>
+                </li>
+            </ul>
+        </section>
+        </div>
+    `,
+    data: function(){
+        return {
+            "items": [
+                { "id": 0, "name": "アイテムA",  "img": "image/items/a.jpg" },
+                { "id": 1, "name": "アイテムB", "img": "image/items/b.jpg" },
+            ],
+            favorites: [],
+        }
+    },
+    methods:{
+        addfavorites: function (id) {
+            var selecteditem = this.items.find(function(item) {
+              return (item.id === id);
+            });
+            let existence = false;
+            this.favorites.forEach(item => {
+                if(item.id === selecteditem.id){
+                    existence = true;
+                    alert("登録済みです")
+                }
+            })
+            if( existence === false){
+                this.favorites.push(selecteditem)
+            }
+        },
+        delfavorites: function (id) {
+            this.favorites.splice(id, 1)
+        } ,
+        isActive: function (id) {
+            return !!this.favorites.find(function (favo) {
+              return favo === id
+            })
+        }
+      }
+    });
+```