add deck to view, can click on cards

views/card-module.js

@@ -1,16 +1,29 @@
 export default{
-    emits:[],
-    props: ['card'],
+    emits:['unSelected','selected'],
+    props: ['card','id'],
     data: function(){
         return{
+            idUsed:"id"+this.id,
+            isClicked:false,
         }
     },
     methods:{
-        clicked:function () {
-            
+        clicked() {
+            if(!this.isClicked){
+                this.isClicked=true
+                document.querySelector(`#${this.idUsed}`).setAttribute("style","border: 2px solid red; margin: 20px; color: red; fontSize: 20px; cursor: pointer");
+                this.$emit('selected',this.id);
+            }
+            else{
+                this.isClicked=false
+                document.querySelector(`#${this.idUsed}`).setAttribute("style","border: 2px solid black; margin: 20px; color: red; fontSize: 20px; cursor: pointer");
+                this.$emit('unSelected',this.id);
+            }
         }
     },
     template:`
-    <div v-bind:style="{margin:'20px', border: '2px solid black', color: 'red', fontSize: '20px' }">{{card}}</div>
+    <div v-bind:id="idUsed" v-bind:style="{border: '2px solid black',margin:'20px', color: 'red', fontSize: '20px', cursor: 'pointer' }" v-on:click="clicked">
+        {{card.attributes}}
+    </div>
     `
 }

views/deck-module.js

@@ -2,19 +2,26 @@ export default{
     emits:[],
     data: function(){
         return{
-            card:new Card({"filling":"empty"})
+            card:new Card({"filling":"empty"}),
+            deck : new Deck([0,1,2,3],3),
+            id:0,
+            selectedCards:[]
         }
     },
     methods:{
-        clicked:function () {
-            
-        }
+        selected(id){
+            console.log("selected",id);
+            this.selectedCards[id]=this.deck.outputCards[id-1]
+        },
+        unSelected(id){
+            console.log("unSelected",id);
+        },
     },
     template:`
     <div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', margin:'20px 10em 20px 20px'}">
-        <div v-for="n in 10">
+        <div v-for="n in deck.outputCards.length">
             {{ n }}
-            <card-module :card={card}></card-module>
+            <card-module @selected='selected' @un-selected='unSelected' :id=n :card=this.deck.outputCards[n-1]></card-module>
         </div>
     </div>
     `