exchange-2.0/resources/assets/vue/components/general/forms/RemarkCommentFormComponent.vue

<template>
    <div class="row m-t-5" @keyup.enter="submitForm">
        <div class="col">
            <validation-wrapper-component :validator="$v.parameters.content">
                <input type="text" class="form-control fs-12" placeholder="Write your comments..." v-model.trim="parameters.content">
            </validation-wrapper-component>
        </div>
        <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
            <i class="fa fa-paper-plane" @click="submitForm"></i>
        </div>
    </div>
</template>
<script>
    import modalFormHandler from '../../../general/mixins/modalFormHandler';
    import { required } from "vuelidate/lib/validators";

    export default {
        props: {
            id: {
                type: Number,
                required: true
            },
            module_type: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                parameters: {
                    // content: this.data.remarks.length > 0 ? this.data.remarks[0].content : '',
                    content: '',
                    model_type: this.module_type
                }
            };
        },
        validations: {
            parameters: {
                content: { required },
            }
        },
        created() {
            if (this.data) {
                this.parameters.content = this.data.content;
            }
        },
        methods: {
            submitForm() {
                this.submit(this.data ? this.route('api.remark.update', this.data.id) : this.route('api.remark.create', this.id), this.data ? 'put' : 'post', this.section, true, true);
            },
        },
        mixins: [modalFormHandler]
    }
</script>