vue-playgound/src/components/Distributor-form.vue

<template>
  <div id="distributor-form">
    <b-form @submit="onSubmit">
      <!-- Title Field -->
      <b-form-group :label="labels.title"
                    label-for="distributor_title">
        <b-form-input id="distributor_title"
                      type="email"
                      v-model="distributor.title"
                      required
                      :placeholder="labels.titlePlaceholder">
        </b-form-input>
      </b-form-group>
       <!-- Notes Field -->
      <b-form-group :label="labels.notes"
                      label-for="distributor_notes">
        <b-form-textarea id="distributor_notes"
                      v-model="distributor.notes"
                      :placeholder="labels.notesPlaceholder"
                      :rows="3"
                      :max-rows="6">
        </b-form-textarea>
      </b-form-group>
       <!-- Contacts Fields -->
      <b-form-group :label="labels.contacts">
        <!-- If there are any contacts -->
        <b-table v-if="names" :items="contacts" :fields="names">
          <template slot="actions" slot-scope="row">
            <b-button size="sm" @click.stop="onDelete(row.item)" class="mr-1">
              {{labels.delete}}
            </b-button>
          </template>            
        </b-table>
        <!-- Inline contacts form -->
        <b-form inline v-for="(contact, key) in distributor.contacts" :key="contact.id">
          <b-input class="mb-3 mr-sm-3" 
              v-model="contact.name"
              :placeholder="labels.name" />

          <b-input class="mb-3 mr-sm-3" 
              v-model="contact.email" 
              :placeholder="labels.email" />

          <b-input class="mb-3 mr-sm-3" 
              v-model="contact.phone" 
              :placeholder="labels.phone"/>
              
          <b-button @click.stop="onDelete(key)" class="mb-3 mr-sm-3"  variant="primary">{{labels.delete}}</b-button>
        
        </b-form>

        <b-form-group>
          <b-button @click.stop="onAddContact()" class="mb-12 mr-sm-12"  variant="primary">{{labels.add}}</b-button>
        </b-form-group>
    
        <b-form-group class="text-right">
          <b-button  type="submit" variant="primary">{{labels.submit}}</b-button>
          <b-button @click.stop="onCancel()" type="reset" variant="danger">{{labels.cancel}}</b-button>
        </b-form-group>
      </b-form-group>
    </b-form>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';
import * as types from '../store/types';
import {store} from '../store/store';

export default {
  props: {
    id: {
      default: null
    },
  },
  data () {
    return {
      labels: {
        title: 'Title:',
        notes: 'Notes:',
        contacts: 'Contacts:',
        delete: 'Delete',
        submit: 'Save',
        cancel: 'Cancel',
        titlePlaceholder: 'Enter title',
        notesPlaceholder: 'Enter something',
        add: 'Add',
        name: 'Name',
        email: 'Email',
        phone: 'Phone',
      }
    }
  },
  computed: {
    ...mapGetters({
          contacts: types.GET_CONTACTS,
          names: types.GET_CONTACT_FIELDS,
      }),
      distributor: {
        get() {
          return this.$store.getters['distributor/GET_DISTRIBUTOR'](this.id)
        },
        set(val) {
          //Placeholder
        },
      }
  },
  watch: {
    distributor: {
      handler(val){
        this.saveDistributor({
          id: val.id, 
          distributor: val
        });
      },
      deep: true
    }
  },
  methods: {
    ...mapActions({
          saveDistributor: types.SET_DISTRIBUTOR,
      }),
    onSubmit (ev) {
      console.log(ev);
    },
    onAddContact () {
      console.log('add');
    },
    onDelete(item) {
      console.log('delete', item);
    },
    onCancel() {
      console.log('onCancel');
    }
  },
}
</script>

<style lang="scss">
  #distributor-form{
    text-align: left;
  }
</style>