Skip to main content

value

Description​

Optional. Provides a list of users that can be referenced in the comments widget

Usage​

value?: {
  id?: string | number;
  content: string;
  author?: {
    id: string | number;
    name?: string;
    avatar?: string;
    color?: string;
  };
  user?: string | number;
  date?: Date;
  format?: "text" | "markdown" | FormatComponent;
}[] | string | number;

Parameters​

  • id - (optional) an id of a comment
  • content - (optional) the message content
  • author - (required) the author object of the message, including:
    • id - (required) unique identifier of the author
    • name - (optional) name of the author
    • avatar - (optional) avatar URL of the author
    • color - (optional) color used to style the author's messages
  • user - (optional) the name of a user
  • date - (optional) the date when the message was posted
  • format - (optional) controls how the message content is rendered in the comments widget (for the description refer to format) format - (optional) controls how the comment content is rendered in the widget.

Examples​

Initializing comments widget with data and embedded authors​

<script setup>
  import { Comments } from '@svar-ui/vue-comments';

  const value = [
    {
      id: "1",
      content: "Hello, world!",
      author:{ id: 1, name: "John Doe" },
      date: new Date(),
    },
  ];
</script>

<template>
  <Comments :value="value" />
</template>

Initializing comments widget with data and list of users​

<script setup>
  import { Comments } from '@svar-ui/vue-comments';

  const value = [
    {
      id: "1",
      content: "Hello, world!",
      user: 1,
      date: new Date(),
    },
  ];

  const users = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Jane Doe" },
  ];
</script>

<template>
  <Comments :value="value" :users="users" />
</template>

Initializing empty comments widget​

<script setup>
  import { Comments } from '@svar-ui/vue-comments';
</script>

<template>
  <Comments />
</template>

Initializing widget and loading comments​

<script setup>
  import { ref, onMounted } from 'vue';
  import { Comments } from '@svar-ui/vue-comments';

  const value = ref([]);

  onMounted(() => {
    fetch('/api/comments')
      .then(r => r.json())
      .then(x => value.value = x);
  });
</script>

<template>
  <Comments :value="value" />
</template>