cssd-back/resources/js/vue/components/ticket/SendMessage.vue

<template>
    <div>
        <v-card-text>
            <v-container grid-list-md>
                <v-flex xs12 sm12 md12>
                    <v-textarea name="input-7-1" v-model="form.message" color="black" label="Message" hint="Hint text"></v-textarea>
                </v-flex>
            </v-container>
        </v-card-text>

        <v-card-actions>
            <v-spacer></v-spacer>
            <v-layout row wrap>
                <v-btn color="black" class="mr-2 WM-ActionButton" @click="register()">
                    <v-icon class="white--text mr-2 caption">fas fa-chevron-right</v-icon>
                    <span>Send</span>
                </v-btn>
            </v-layout>
        </v-card-actions>
    </div>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import toast from "@/services/global/toast.service";
import { mapMutations, mapGetters } from "vuex";
export default {
    data() {
        return {
            form : {
                message: '',
                user_id : '',
            }
        };
    },
     props: {
        userId: {
            type : Number,
            default : 0
        },
        message: {
            type : String,
            default : ''
        },
    },
    mounted() {
        this.form.user_id = this.userId;
    },
    methods: {
        ...mapMutations("modal", ["closeModal", "setResultModal"]),
        async register() {
            if(this.userId > 0) {
                const result = await ApiService.post( urls.storeMessages, this.form );
                if (result && result.status == 200) {
                    this.setResultModal(Math.random(12));
                    this.closeModal();
                }
            } else {
                toast.error('please Select User');
            }
        }
    },
    watch: {
        userId(val) {
            this.form.user_id = val;
        }
    },
    computed: {
        ...mapGetters("modal", ["getModalProperties"])
    }
};
</script>