<KtComment
	v-for="comment in comments"
	:key="comment.id"
	v-bind="comment"
	allowInternal
	dataTest="comments"
	:isReadOnly="false"
	:tabIndex="1"
	:userAvatar="currentUser.avatar"
	@add="handleAdd($event)"
	@delete="handleDelete($event)"
	@edit="handleEdit($event)"
/>
<KtCommentInput
	allowInternal
	dataTest="comments"
	placeholder="Add a comment"
	:tabIndex="1"
	:userAvatar="currentUser.avatar"
	@add="handleAdd($event)"
/>

Usage

Comment Object

{
	createdAt: '2018-12-04 09:57',
	id: 1,
	isDeletable: true,
	isEditable: true,
	isInternal: true,
	isModified: true,
	message: 'Comment message',
	replies: [
		{
			createdAt: '2018-12-04 09:57',
			id: 2,
			isDeletable: false,
			isEditable: false,
			isInternal: true,
			isModified: true,
			message: 'Reply message',
			user: {
				avatar: 'https://picsum.photos/200',
				id: 102,
				name: 'User name',
			},
		},
	],
	user: {
		avatar: 'https://picsum.photos/230',
		id: 101,
		name: 'User name',
	},
}

Events

{
	isInternal?: boolean,
	message: string,
	parentId?: number | string,
	replyToUserId?: number | string,
}

{
	id: number | string,
	parentId?: number | string,
}

{
	id: number | string,
	isInternal?: boolean,
	message: string,
	parentId?: number | string,
}

Parsing HTML

KtComment will escape all tags by default but you can opt out and pass your own parser by using the parser prop.

Remember to escape malicious tags to prevent Cross-site-scripting attacks, you can use KtComment's default parser function with KtComment.defaultParser.

methods: {
	dangerouslyOverrideParser: msg => escape(msg).replace(/\n/g, '<br />'),
	// alternativly you could
	dangerouslyOverrideParser: msg => escape(msg),
	postEscapeParser: msg => msg.replace(/\n/g, '<br />'),
	// or just
	postEscapeParser: msg => msg.replace(/\n/g, '<br />'),
}