Implement quick blog comments in VueJS

Our great sponsors

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App

InfluxDB - Power Real-Time Data Analytics at Scale

WorkOS - The modern identity platform for B2B SaaS

Our great sponsors

appwrite-blog-comments-with-vue

1 0 1.8 Vue

Quick blog comments in Vue.js and using Appwrite for storing data

For the complete source code, check out this GitHub repository.

Vue.js

381 206,901 7.9 TypeScript

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

This project is completed and written in Vue.js. Vue is an open-source JavaScript front-end framework for building user interfaces and single-page applications with HTML, CSS, and JavaScript.

SurveyJS

surveyjs.io sponsored

Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Appwrite

581 40,869 10.0 TypeScript

Build like a team of hundreds_

We also added scoped styles using the tags for the component.

Next, we import the Blog component to the root component App.vue.
<template>
 <div class="container">
 <Blog />
 </div>
 </template>

 <script>
 import Blog from '@/components/Blog.vue';

 export default {
 name: 'App',
 components: {
 Blog,
 };
 </script>
 <style>
 [component styles go in here]
 </style>
Enter fullscreen mode Exit fullscreen mode
Here’s the complete code snippet of the home page.

https://gist.github.com/Chuloo/c6d23d0b7503228b553df180067c2e43

The blog comments page looks like this now:

Creating the comment input forms

Next, we create input fields with which readers can enter comments.

In the components folder, we create a new file, AddComment.vue, with the following content:
 <template>
 <div class="form">
 <form>
 <div class="form__group">
 <label>Leave a comment</label>
 <textarea
 v-model="newComment"
 rows="10"
 required
 cols="50"
 placeholder="type in your comment"
 />
 <button>Submit</button>
 </div>
 </form>
 </div>
 </template>

 <script>
 export default {
 data() {
 return {
 newComment: '',
 };
 },
 };
 </script>

 <style scoped>
 .form {
 margin-top: 1.5em;
 }
 label {
 display: block;
 margin-bottom: 1em;
 font-weight: 700;
 font-family: Padauk, sans-serif;
 }
 textarea {
 width: 100%;
 margin-top: 0.5em;
 }
 button {
 border: unset;
 background: #79b791;
 color: #230c0f;
 font-weight: 700;
 padding: 1em 2.5em;
 margin-top: 1em;
 }
 </style>
Enter fullscreen mode Exit fullscreen mode
The code above has a data property newComment set to an empty string. This property is bound to the </code> field using the v-model directive. With this in place, let's import the <code>AddComment</code> component into the <code>App.vue</code> component with the following code: <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> <template> <div class="container"> <Blog />  <add-comment /> </div> </template> <script> // other import component import AddComment from '@/components/AddComment.vue'; // add this export default { name: 'App', components: { // blog component AddComment // add this }; </script> <style> /* styles for the page */ </style> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> The result of the blog should look like this: <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4tbaFXuG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648510552616_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4tbaFXuG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648510552616_image.png" alt="text input area blog" loading="lazy" width="880" height="476"></a> Next, we will list all comments created under a post. We will also include options to update or delete a comment. We create a file, <code>Comment.vue</code>, in the components folder with the following content: <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> <template> <div class="comment"> <div class="comment__flex"> <p>I found this article helpful</p> <div class="comment__flex-btn"> <button class="update">Update</button> <button class="del">Delete</button> </div> </div> </div> </template> <style> [Styles go in here] </style> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> You can see the complete component with styles in <a href="https://gist.github.com/Chuloo/0edc8d42d8c69221b6cac39eafa93204">this gist</a>. <a href="https://gist.github.com/Chuloo/0edc8d42d8c69221b6cac39eafa93204">https://gist.github.com/Chuloo/0edc8d42d8c69221b6cac39eafa93204</a> Finally, let's include the <code>Comment</code> component in the <code>App.vue</code> file. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> <template> <div class="container"> <Blog />  <div class="comment-space"> <p>Comment (1)</p> </div> <div> <comment class="message" /> </div> <add-comment /> </div> </template> <script> // other import component import Comment from '@/components/Comment'; export default { name: 'App', components: { // other components Comment // add this }, }; </script> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> All the data on the page is static, and the page looks like the image below. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eUcUW_7a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648512532977_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eUcUW_7a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648512532977_image.png" alt="blog" loading="lazy" width="880" height="541"></a> Next, we’ll add interactivity to the page. <h2> <a name="appwrite-project-setup" href="#appwrite-project-setup"> </a> Appwrite project setup </h2> To use Appwrite in this Vue application, we install the Appwrite client-side SDK with the command. <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>yarn add appwrite # or npm install appwrite </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Next, let's set up the app by creating a new Appwrite project. <h2> <a name="create-a-new-appwrite-project" href="#create-a-new-appwrite-project"> </a> Create a new Appwrite Project </h2> We click the Create Project button to start a new project on our Appwrite web console (either local or hosted). After that, we obtain the <code>Project ID</code> and <code>API Endpoint</code> in the project's settings tab. In the project’s root directory, we create a utils.js file to define a new Appwrite instance and other helpful application variables. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> import { Appwrite } from 'appwrite'; // Init your Web SDK const appwrite = new Appwrite(); appwrite .setEndpoint('http://EndpointURL.example') // Replace this with your endpoint .setProject('ProjectID'); // Replace this with your ProjectID appwrite.account.createAnonymousSession().then( (response) => { console.log(response); }, (error) => { console.log(error); } ); export const db = appwrite.database; export const COLLECTION_ID = 'COLLECTION ID'; // Replace with your Collection ID </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> To bypass some security requirements, we created an anonymous session on Appwrite. <h2> <a name="creating-the-database-collection" href="#creating-the-database-collection"> </a> Creating the database collection </h2> Appwrite provides a functional database with which we will store our blog comments. To create a collection in our Appwrite console panel, we navigate to the Database tab, click the Add Collection button, and provide a collection name. We copy the <code>CollectionID</code> as we require it to interact with the collection using the client-side SDK. At the <code>Collection Level</code> within the <code>settings</code> tab, we set the Read and Write access to have the value of <code>role:all</code>. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2lbZuyh3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648518488594_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2lbZuyh3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648518488594_image.png" alt="blog" loading="lazy" width="880" height="409"></a> Update the data in <code>utils.js</code> to include the Appwrite credentials obtained. Finally, in the attributes tab, let's create the properties for our documents. For this application, we store the comment and date of each comment. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9Yg1miJT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648518852144_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9Yg1miJT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648518852144_image.png" alt="blog comment" loading="lazy" width="880" height="470"></a> <h2> <a name="fetch-all-comments" href="#fetch-all-comments"> </a> Fetch all comments </h2> We require a function to fetch all comments when the app loads. We do this in the <code>script</code> portion of <code>App.vue</code> with: <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> <script> import { COLLECTION_ID, db } from '@/utils'; export default { name: 'App', components: { // all components }, created() { this.fetchComments(); }, data() { return { comments: [], }; }, methods: { fetchComments() { let promise = db.listDocuments(COLLECTION_ID); promise.then( (res) => { console.log(res); this.comments = res.documents; }, (err) => { console.log(err); } ); }, }, }; </script> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> We created the comments array in the <code>data()</code> function to store comments we retrieve using the <code>listDocuments</code> API. In the <code>created()</code> lifecycle method, run the <code>fetchComments()</code> function when the App component is created. We update the HTML in the <code><template></code> section of the <code>App.vue</code> component with the following. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><template> <div class="container"> <Blog /> <div class="comment-space"> <p> {{ comments.length > 1 ? `Comments (${comments.length})` : comments.length == 1 ? `Comment (${comments.length})` : '' }} </p> </div> <div v-for="data in comments" :key="data.comment">  </div> <add-comment :fetchComments="fetchComments" /> </div> </template> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> The <code></code> tag contains a ternary operator that shows the number of comments. Using the <code>v-for</code> directive, we loop through and render each comment. To reuse the function to fetch all comments after creating a new comment, we bind the <code>:fetchComments</code> prop to the fetchComments method we defined earlier. <h2> <a name="creating-a-blog-comment" href="#creating-a-blog-comment"> </a> Creating a blog comment </h2> We move to the <code>AddComment.vue</code> file to handle a comment’s addition to the database. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> <template> <div class="form"> <form @submit.prevent="createNewComment"> <div class="form__group"> <label>Leave a comment</label> <textarea v-model="newComment" rows="10" required cols="50" placeholder="type in your comment" /> <button>Submit</button> </div> </form> </div> </template> <script> import { COLLECTION_ID, db } from '@/utils'; export default { props: ['fetchComments'], // data () methods: { createNewComment() { if (this.newComment === '') { return; } let promise = db.createDocument(COLLECTION_ID, 'unique()', { comment: this.newComment, date: new Date(), }); promise.then( () => { this.fetchComments(); this.newComment = ''; }, (err) => { console.log(err); } ); }, }, }; </script> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> In the createNewComment method, we use Appwrite’s createDocument API to write a new comment to the database. An error message is logged if the write operation fails. We fetch an updated list of all comments after adding a new comment. The Appwrite web console will display one document representing a comment in the image below: <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NDPw8xMg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648544339183_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NDPw8xMg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648544339183_image.png" alt="blog" loading="lazy" width="880" height="533"></a> <h2> <a name="updating-the-comment-list-component" href="#updating-the-comment-list-component"> </a> Updating the Comment list Component </h2> In the App.vue component, we update the <code>comment</code> component’s props to include the comment data and the <code>fetchComments</code> method. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><template> <div class="container"> <-!-- Blog component --> <-!-- Comment count --> <div v-for="data in comments" :key="data.comment"> <-!-- add this --> <comment class="message" :data="data" v-on:refreshData="fetchComments" /> </div> <-!-- add-comment component --> </div> </template> <script> // import component import Comment from '@/components/Comment'; export default { components: { // other components Comment, }, }; </script> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <code>fetchComments</code> runs once the <code>refreshData</code> event is fired. Let's update the <code>Comment.vue</code> component to handle comment updates and deletion. We will also include a component to edit a comment. First, we add the update comment function in the script portion with: <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><script> import { db } from '@/utils'; export default { props: ['data'], data() { return { open: false, displayedComment: '', }; }, methods: { updateComment() { this.open = !this.open; }, updateCommentMethod() { let promise = db.updateDocument(this.data.$collection, this.data.$id, { comment: this.displayedComment, }); this.open = false; promise.then( () => { this.$emit('refreshData'); }, (err) => { console.log(err); } ); }, }, }; </script> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> We added a state variable to manage the visibility of a comment’s action buttons and another variable to hold the new text. Appwrite’s <code>updateDocument</code> API uses the collection ID and document ID passed as props to update the comment. Once the comment is updated, we emit the <code>refreshData</code> event to fetch all comments. We update the template portion to utilize the methods and variables created. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><template> <div class="comment"> <div class="comment__flex"> <p>{{ data.comment }}</p> <div class="comment__flex-btn"> <button class="update" @click="updateComment">Update</button> <button class="del" @click="deleteComment">Delete</button> </div> </div> <div v-if="this.open" class="open"> <form @submit.prevent="updateCommentMethod"> <div class="form-group"> <textarea cols="50" rows="10" id required :placeholder="data.comment" v-model="displayedComment" /> <button class="update">Update</button> </div> </form> </div> </div> </template> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> Lastly, we add a method to delete a comment using Appwrite’s <code>deleteDocument</code> API. <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><script> export default { methods: { deleteComment() { let promise = db.deleteDocument(this.data.$collection, this.data.$id); promise.then( () => { this.$emit('refreshData'); }, (err) => { console.log('error occured', err); } ); }, } } </script> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> The image below is the final look of the web page. <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tnr6Rh7D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648552941268_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tnr6Rh7D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_D7CBE305335ABA15AC2578F5A659EF2A343B08496D251D5A83784758220481C8_1648552941268_image.png" alt="blog" loading="lazy" width="880" height="540"></a> <h2> <a name="conclusion" href="#conclusion"> </a> Conclusion </h2> This post is an in-depth guide on using Appwrite to create, display, edit, and delete blog comments. As seen, this feature doesn’t require a custom backend server. Try to add more blog posts and create unique comments for each. <h2> <a name="learn-more" href="#learn-more"> </a> Learn More </h2> <ul> <li><a href="https://appwrite.io/docs/client/database">Appwrite CRUD operations</a></li> <li><a href="https://appwrite.io/docs/getting-started-for-web">Getting started with Appwrite</a></li> <li><a href="https://appwrite.io/docs/sdks">Appwrite SDKs</a></li> </ul>

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project