kiranparajuli589
commented
2 years ago It worked for me. I'm using
"vue": "^2.6.11",
"v-tooltip": "^2.0.0",
"vue-mention": "^1.1.0",Do not use the latest version of
v-tooltiphere. see https://github.com/Akryum/vue-mention/issues/60
and inside the component
<template>
<div>
<Mentionable
:keys="['@']"
:items="mentionList"
offset="60"
>
<v-textarea
:id="`comment-input-${this.publication.id}`"
outlined hide-details="auto"
v-model="comment" name="comment"
prepend-inner-icon="mdi-comment-outline"
placeholder="Give your thoughts..."
@change="$emit('change', $event)"
@keyup="$emit('keyup', $event)"
@input="$emit('input', $event)"
@focus="pickerColor = 'primary'"
@blur="pickerColor = 'grey'" class="full-width"
:error-messages="formErrors['comment']"
autofocus
/>
<template #no-result>
<div class="dim">
Hmm...no peoples to mention.
</div>
</template>
<template #item-@="{ item }">
<div class="user">
{{ item.value }}
<span class="dim">
({{ item.name }})
</span>
</div>
</template>
<template #item-#="{ item }">
<div class="issue">
<span class="number">
#{{ item.value }}
</span>
<span class="dim">
{{ item.label }}
</span>
</div>
</template>
</Mentionable>
<v-fab-transition>
<v-btn color="primary"
class="mt-2" v-if="comment"
@click="addComment"
>
Add Comment
</v-btn>
</v-fab-transition>
</div>
</template>No other configurations are required.
See my Pr here https://github.com/word-club/web/pull/13/files for adding vue mention in a comment field.
Hello I have been google a lot to integrate this with Vuetify. But very much bad luck that I am still failed to manage.