self-sovereign-id/src/views/Contacts.vue

<template>
<div>
  <h1>Contacts</h1>
  <p>Cards in Contacts&#58; {{numContactsCards}}</p>
  <div v-if="numContactsCards > 0">
    <Deck :deck="contactsCards"
          :cpath="`/contacts/card/`"/>
  </div>

  <hr />

  <h2>Add More</h2>

  <form @submit.prevent="addContactsCard(card); card={name: '', email: '', phone: '', fingerprint: ''}">
    <input type="text" placeholder="Name" v-model="card.name" required />
    <input type="text" placeholder="Email" v-model="card.email" />
    <input type="text" placeholder="Phone" v-model="card.phone" /><br />
    <input type="text" placeholder="Key Fingerprint" v-model="card.fingerprint" />
    <button>Submit</button>
  </form>

  <hr />

  <form @submit.prevent="addContactsCardFromBlob(blob); blob=''">
    <input type="text" placeholder="json blob" v-model="blob" />
    <button>Submit</button>
  </form>

  <p>Try this example&#58;</p>
  <p>
    <pre>{{JSON.stringify({
      name:"blarf"
      ,email:"foo@blamo.com"
      ,phone:"555-1234"
      ,fingerprint:"0000 0000 0000 0000 0000 0000 0000 0000 0000 0000"}
      , null, 1)}}</pre>
  </p>
</div>
</template>

<script>
import {mapState, mapMutations, mapGetters} from "vuex"
import Deck from '@/components/Deck.vue'

export default {
    name: "Contacts",
    data() {
        return {
            card: {name: "", email: "", phone: "", fingerprint: ""},
            blob: ""
        }
    },
    components: { Deck },
    computed: {
        ...mapState([
            "contactsCards",
        ]),
        ...mapGetters([
            "numContactsCards"
        ])
    },
    methods: {
        ...mapMutations([
            "addContactsCard",
            "addContactsCardFromBlob",
        ])
    }
}
</script>

<style scoped>
</style>