pixelfed/resources/assets/components/partials/post/CommentReplyForm.vue

<template>
    <div class="my-3">
    	<div class="d-flex align-items-top reply-form child-reply-form">
    		<img class="shadow-sm media-avatar border" :src="profile.avatar" width="40" height="40" draggable="false" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">

            <div style="display: flex;flex-grow: 1;position: relative;">
        		<textarea
        			class="form-control bg-light rounded-lg shadow-sm" style="resize: none;padding-right: 60px;"
        			placeholder="Write a comment...."
        			v-model="replyContent"
        			:disabled="isPostingReply" />

                <button
                    class="btn btn-sm py-1 font-weight-bold ml-1 rounded-pill"
                    :class="[replyContent && replyContent.length ? 'btn-primary' : 'btn-outline-muted']"
                    @click="storeComment"
                    :disabled="!replyContent || !replyContent.length"
                    style="position: absolute;right:10px;top:50%;transform:translateY(-50%)">
                    Post
                </button>
            </div>
    	</div>
        <p class="text-right small font-weight-bold text-lighter">{{ replyContent ? replyContent.length : 0 }}/{{ config.uploader.max_caption_length }}</p>
    </div>
</template>

<script type="text/javascript">
	export default {
		props: {
			parentId: {
				type: String
			}
		},

		data() {
			return {
                config: App.config,
				isPostingReply: false,
				replyContent: '',
				profile: window._sharedData.user,
				sensitive: false
			}
		},

		methods: {
			storeComment() {
				this.isPostingReply = true;

				axios.post('/api/v1/statuses', {
					status: this.replyContent,
					in_reply_to_id: this.parentId,
					sensitive: this.sensitive
				})
				.then(res => {
					this.replyContent = undefined;
					this.isPostingReply = false;
					this.$emit('new-comment', res.data);
					// this.ids.push(res.data.id);
					// this.feed.push(res.data);
				})
			},
		}
	}
</script>