<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>