InlineEdit Field for Laravel Nova, IndexField.vue

gistfile1.txt

<template slot="field">
    
    <div v-if="edit">
        <form @submit.prevent="submit" autocomplete="off" id="form">

            <input :class="errorClasses" :id="field.name"
                   :placeholder="field.name"
                   :resource-id="waiverId"
                   :resource-name="resourceName"
                   class="w-full form-control form-input form-input-bordered"
                   type="text"
                   v-click-outside="hide"
                   v-model="value"
            />
        </form>
    </div>
    <div v-else="edit">
        <span @dblclick="toggleEdit">{{value}}</span>
    </div>

</template>

<script>

    import ClickOutside from 'vue-click-outside'
    import {Errors, FormField, HandlesValidationErrors} from 'laravel-nova'

    export default {
        mixins: [FormField, HandlesValidationErrors],

        props: ['resource', 'resourceName', 'resourceId', 'field'],
        data: () => ({
            edit: false,
            fields: [],
        }),
        methods: {
            toggleEdit: function () {
                this.edit = !this.edit
            },
            hide() {
                this.submit(),
                    this.edit = false
            },


            /**
             * Update the resource using the provided data.
                i used this on a resource with a relationship
               * formData.append(this.$parent.resource.fields[0].name, this.$parent.resource.id.value)
              */
                
            async submit() {

                var formData = new FormData();

                formData.append(this.field.attribute, this.value)
                formData.append('_method', 'PUT')
                return Nova.request().post(`/nova-api/${this.resourceName}/${this.$parent.resource.id.value}`, formData)
                    .then((response) => {
                        console.log(response.data);
                    }, (response) => {
                        // error callback
                    });
            },

        },

        computed: {
            waiverId: function () {
                return this.$parent.resource.id.value
            },

        },

        directives: {
            ClickOutside
        }
    }
</script>

So does this work currently?

yes it works on my project, but it needs some work