upccrt/resources/js/components/credential-list.vue

<template>
    <div>
        <credential-form-modal modal-id="newCredentialModal" :descriptions="creddescList" :create="true" :pcid="pcid"></credential-form-modal>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newCredentialModal">New Credential</button>
        <div v-for="(credential, index) in credentials" :key="index">
            <credential :credential="credential" :descriptions="creddescList" @delete-cred="deleteCred(index)"></credential>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        credentialList: {
            type: Array,
            required: true
        },
        descriptions: {
            type: Array,
            required: true
        },
        pcid: {
            type: Number
        },
        groupid: {
            type: Number
        }
    },
    data () {
        return {
            credentials: this.credentialList
        }
    },
    computed : {
        creddescList: function () {
            let list = {}
            this.descriptions.map(val => {
                list[val.creddescid] = val.credtitle
            })
            return list
        }
    },
    methods: {
        deleteCred: function(index) {
            console.log(this.credentials.splice(index, 1));
        }
    }
}
</script>