Vue.js Components & Data Binding

1<!-- UserCard.vue -->
2<template>
3    <div class="user-card">
4        <div class="avatar">
5            <img :src="user.avatar" :alt="user.name + ' avatar'">
6            <div class="status-indicator" :class="user.status"></div>
7        </div>
8        <div class="user-info">
9            <h3>{{user.name}}</h3>
10            <p class="title">{{user.title}}</p>
11            <p class="email">{{user.email}}</p>
12            <div class="skills">
13                <span v-for="skill in user.skills" :key="skill" class="skill-tag">
14                    {{skill}}
15                </span>
16            </div>
17        </div>
18        <div class="actions">
19            <button @click="handleMessage" class="btn-primary">Message</button>
20            <button @click="handleConnect" class="btn-secondary">Connect</button>
21        </div>
22    </div>
23</template>
24
25<script>
26export default {
27    name: 'UserCard',
28    props: {
29        user: {
30            type: Object,
31            required: true,
32            validator(value) {
33                return value.name && value.email;
34            }
35        }
36    },
37    methods: {
38        handleMessage() {
39            this.$emit('message', this.user.id);
40        },
41        handleConnect() {
42            this.$emit('connect', this.user.id);
43        }
44    }
45};
46</script>
47
48<style scoped>
49.user-card {
50    border: 1px solid #e2e8f0;
51    border-radius: 12px;
52    padding: 24px;
53    background: white;
54    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
55    transition: transform 0.2s ease;
56}
57
58.user-card:hover {
59    transform: translateY(-2px);
60    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
61}
62
63.avatar {
64    position: relative;
65    width: 64px;
66    height: 64px;
67    margin-bottom: 16px;
68}
69
70.avatar img {
71    width: 100%;
72    height: 100%;
73    border-radius: 50%;
74    object-fit: cover;
75}
76
77.status-indicator {
78    position: absolute;
79    bottom: 4px;
80    right: 4px;
81    width: 16px;
82    height: 16px;
83    border-radius: 50%;
84    border: 2px solid white;
85}
86
87.status-indicator.online { background: #48bb78; }
88.status-indicator.away { background: #ed8936; }
89.status-indicator.offline { background: #a0aec0; }
90
91.user-info h3 {
92    margin: 0 0 4px 0;
93    color: #2d3748;
94}
95
96.title {
97    color: #4a5568;
98    font-size: 0.9rem;
99    margin: 0 0 8px 0;
100}
101
102.email {
103    color: #718096;
104    font-size: 0.8rem;
105    margin: 0 0 12px 0;
106}
107
108.skills {
109    display: flex;
110    flex-wrap: wrap;
111    gap: 6px;
112    margin-bottom: 16px;
113}
114
115.skill-tag {
116    background: #edf2f7;
117    color: #4a5568;
118    padding: 4px 8px;
119    border-radius: 12px;
120    font-size: 0.75rem;
121}
122
123.actions {
124    display: flex;
125    gap: 8px;
126}
127
128.btn-primary, .btn-secondary {
129    padding: 8px 16px;
130    border: none;
131    border-radius: 6px;
132    cursor: pointer;
133    font-size: 0.875rem;
134    transition: background-color 0.2s ease;
135}
136
137.btn-primary {
138    background: #4299e1;
139    color: white;
140}
141
142.btn-primary:hover {
143    background: #3182ce;
144}
145
146.btn-secondary {
147    background: #e2e8f0;
148    color: #4a5568;
149}
150
151.btn-secondary:hover {
152    background: #cbd5e0;
153}
154</style>

1<!-- Parent component using UserCard -->
2<template>
3    <div class="user-directory">
4        <h1>Team Directory</h1>
5        <div class="search-bar">
6            <input
7                v-model="searchQuery"
8                placeholder="Search team members..."
9                class="search-input"
10            >
11        </div>
12        <div class="user-grid">
13            <UserCard
14                v-for="user in filteredUsers"
15                :key="user.id"
16                :user="user"
17                @message="handleMessage"
18                @connect="handleConnect"
19            />
20        </div>
21        <div v-if="filteredUsers.length === 0" class="no-results">
22            No users found matching "{{searchQuery}}"
23        </div>
24    </div>
25</template>
26
27<script>
28import UserCard from './components/UserCard.vue';
29
30export default {
31    name: 'UserDirectory',
32    components: {
33        UserCard
34    },
35    data() {
36        return {
37            searchQuery: '',
38            users: [
39                {
40                    id: 1,
41                    name: 'Alice Johnson',
42                    title: 'Senior Frontend Developer',
43                    email: '[email protected]',
44                    avatar: '/avatars/alice.jpg',
45                    status: 'online',
46                    skills: ['Vue.js', 'React', 'TypeScript']
47                },
48                {
49                    id: 2,
50                    name: 'Bob Smith',
51                    title: 'Backend Engineer',
52                    email: '[email protected]',
53                    avatar: '/avatars/bob.jpg',
54                    status: 'away',
55                    skills: ['Node.js', 'Python', 'PostgreSQL']
56                },
57                {
58                    id: 3,
59                    name: 'Carol Davis',
60                    title: 'UX Designer',
61                    email: '[email protected]',
62                    avatar: '/avatars/carol.jpg',
63                    status: 'offline',
64                    skills: ['Figma', 'Sketch', 'User Research']
65                }
66            ]
67        };
68    },
69    computed: {
70        filteredUsers() {
71            if (!this.searchQuery) return this.users;
72
73            const query = this.searchQuery.toLowerCase();
74            return this.users.filter(user =>
75                user.name.toLowerCase().includes(query) ||
76                user.title.toLowerCase().includes(query) ||
77                user.skills.some(skill => skill.toLowerCase().includes(query))
78            );
79        }
80    },
81    methods: {
82        handleMessage(userId) {
83            const user = this.users.find(u => u.id === userId);
84            alert(`Starting conversation with ${user.name}`);
85        },
86        handleConnect(userId) {
87            const user = this.users.find(u => u.id === userId);
88            alert(`Sending connection request to ${user.name}`);
89        }
90    }
91};
92</script>
93
94<style scoped>
95.user-directory {
96    max-width: 1200px;
97    margin: 0 auto;
98    padding: 24px;
99}
100
101.search-bar {
102    margin-bottom: 32px;
103}
104
105.search-input {
106    width: 100%;
107    max-width: 400px;
108    padding: 12px 16px;
109    border: 2px solid #e2e8f0;
110    border-radius: 8px;
111    font-size: 1rem;
112}
113
114.search-input:focus {
115    outline: none;
116    border-color: #4299e1;
117    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
118}
119
120.user-grid {
121    display: grid;
122    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
123    gap: 24px;
124}
125
126.no-results {
127    text-align: center;
128    color: #718096;
129    font-style: italic;
130    padding: 48px 24px;
131}
132</style>

1// main.js - Global registration
2import { createApp } from 'vue';
3import App from './App.vue';
4import UserCard from './components/UserCard.vue';
5
6const app = createApp(App);
7
8// Global registration - available in all components
9app.component('UserCard', UserCard);
10app.component('BaseButton', BaseButton);
11app.component('BaseInput', BaseInput);
12
13app.mount('#app');
14
15// Local registration (preferred for most cases)
16export default {
17    components: {
18        UserCard,        // ES6 shorthand
19        BaseButton: BaseButton,  // Full syntax
20        'custom-input': CustomInput  // Custom name
21    }
22};

1<!-- Compound components working together -->
2<template>
3    <div class="dashboard">
4        <!-- Header component -->
5        <DashboardHeader
6            :user="currentUser"
7            :notifications="notifications"
8            @logout="handleLogout"
9        />
10
11        <!-- Sidebar navigation -->
12        <DashboardSidebar
13            :navigation="navigationItems"
14            :active-section="activeSection"
15            @navigate="handleNavigation"
16        />
17
18        <!-- Main content area -->
19        <DashboardContent>
20            <component
21                :is="currentPageComponent"
22                :data="currentPageData"
23                @action="handlePageAction"
24            />
25        </DashboardContent>
26
27        <!-- Modal system -->
28        <ModalContainer>
29            <UserSettingsModal
30                v-if="showSettingsModal"
31                :user="currentUser"
32                @save="handleSaveSettings"
33                @close="showSettingsModal = false"
34            />
35        </ModalContainer>
36    </div>
37</template>

1<!-- Child Component: ProductCard.vue -->
2<template>
3    <div class="product-card">
4        <img :src="product.image" :alt="product.name">
5        <div class="product-info">
6            <h3>{{product.name}}</h3>
7            <p class="price">${{formattedPrice}}</p>
8            <p class="description">{{product.description}}</p>
9            <div class="rating">
10                <StarRating :rating="product.rating" />
11                <span>({{product.reviews}} reviews)</span>
12            </div>
13            <button
14                :disabled="!product.inStock"
15                @click="handleAddToCart"
16                class="add-to-cart-btn"
17            >
18                {{product.inStock ? 'Add to Cart' : 'Out of Stock'}}
19            </button>
20        </div>
21    </div>
22</template>
23
24<script>
25import StarRating from './StarRating.vue';
26
27export default {
28    name: 'ProductCard',
29    components: {
30        StarRating
31    },
32    props: {
33        // Object syntax with validation
34        product: {
35            type: Object,
36            required: true,
37            validator(value) {
38                // Custom validation logic
39                return value.id && value.name && value.price >= 0;
40            }
41        },
42        // Array syntax for simple props
43        showDiscount: Boolean,
44        currency: {
45            type: String,
46            default: 'USD'
47        }
48    },
49    computed: {
50        formattedPrice() {
51            return new Intl.NumberFormat('en-US', {
52                style: 'currency',
53                currency: this.currency
54            }).format(this.product.price);
55        }
56    },
57    methods: {
58        handleAddToCart() {
59            this.$emit('add-to-cart', {
60                productId: this.product.id,
61                quantity: 1
62            });
63        }
64    }
65};
66</script>

1<script>
2export default {
3    props: {
4        // Basic types
5        title: String,
6        count: Number,
7        isActive: Boolean,
8        tags: Array,
9        config: Object,
10        callback: Function,
11
12        // Multiple possible types
13        id: [String, Number],
14
15        // Required props
16        userId: {
17            type: [String, Number],
18            required: true
19        },
20
21        // Default values
22        theme: {
23            type: String,
24            default: 'light'
25        },
26
27        // Default factory for objects/arrays
28        items: {
29            type: Array,
30            default: () => []
31        },
32        settings: {
33            type: Object,
34            default: () => ({
35                notifications: true,
36                theme: 'auto'
37            })
38        },
39
40        // Custom validation
41        email: {
42            type: String,
43            validator(value) {
44                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
45            }
46        },
47
48        // Enum-like validation
49        size: {
50            type: String,
51            default: 'medium',
52            validator(value) {
53                return ['small', 'medium', 'large', 'extra-large'].includes(value);
54            }
55        }
56    }
57};
58</script>

1<!-- Parent Component -->
2<template>
3    <div class="product-catalog">
4        <!-- Static props -->
5        <ProductCard
6            :product="selectedProduct"
7            :show-discount="true"
8            currency="USD"
9        />
10
11        <!-- Dynamic props -->
12        <ProductCard
13            v-for="product in products"
14            :key="product.id"
15            :product="product"
16            :show-discount="product.discount > 0"
17            :currency="userCurrency"
18            @add-to-cart="handleAddToCart"
19        />
20
21        <!-- Passing all properties of an object as props -->
22        <ProductCard v-bind="productWithProps" />
23
24        <!-- Conditional props -->
25        <ProductCard
26            :product="product"
27            :show-reviews="product.reviews > 0"
28            :highlight="product.id === featuredProductId"
29        />
30
31        <!-- Props with computed values -->
32        <ProductCard
33            :product="product"
34            :discounted-price="calculateDiscountedPrice(product)"
35            :is-favorite="favoriteProductIds.includes(product.id)"
36        />
37    </div>
38</template>
39
40<script>
41export default {
42    data() {
43        return {
44            selectedProduct: null,
45            products: [],
46            userCurrency: 'USD',
47            featuredProductId: null,
48            favoriteProductIds: [1, 3, 7],
49            productWithProps: {
50                product: { /* product data */ },
51                showDiscount: true,
52                currency: 'EUR'
53            }
54        };
55    },
56    computed: {
57        calculateDiscountedPrice() {
58            return (product) => {
59                if (product.discount) {
60                    return product.price * (1 - product.discount / 100);
61                }
62                return product.price;
63            };
64        }
65    },
66    methods: {
67        handleAddToCart(cartItem) {
68            console.log('Adding to cart:', cartItem);
69            // Add to cart logic
70        }
71    }
72};
73</script>

1<!-- Render Props Pattern -->
2<template>
3    <DataProvider :fetch-fn="fetchUserData">
4        <template v-slot="{ data, loading, error }">
5            <div v-if="loading">Loading user data...</div>
6            <div v-else-if="error">Error: {{error.message}}</div>
7            <UserProfile v-else :user="data" />
8        </template>
9    </DataProvider>
10</template>
11
12<!-- Configuration Object Props -->
13<template>
14    <DataTable
15        :columns="tableColumns"
16        :data="tableData"
17        :options="{
18            pagination: true,
19            sorting: true,
20            filtering: true,
21            pageSize: 25,
22            theme: 'modern'
23        }"
24    />
25</template>
26
27<!-- Function Props for Customization -->
28<template>
29    <InfiniteScroll
30        :items="items"
31        :render-item="renderItem"
32        :load-more="loadMoreItems"
33        :has-more="hasMoreItems"
34    />
35</template>
36
37<script>
38export default {
39    methods: {
40        renderItem(item) {
41            return {
42                component: 'ProductCard',
43                props: { product: item }
44            };
45        },
46        loadMoreItems() {
47            // Load more items logic
48            return this.fetchMoreProducts();
49        }
50    }
51};
52</script>

1<!-- Problem: Prop drilling through multiple levels -->
2<template>
3    <!-- GrandParent -->
4    <Parent :user="user" :theme="theme" />
5</template>
6
7<!-- Parent.vue -->
8<template>
9    <!-- Just passing props through -->
10    <Child :user="user" :theme="theme" />
11</template>
12
13<!-- Child.vue -->
14<template>
15    <!-- Finally using the props -->
16    <div :class="theme">{{user.name}}</div>
17</template>
18
19<!-- Solution 1: Provide/Inject -->
20<template>
21    <!-- GrandParent -->
22    <Parent />  <!-- No props needed -->
23</template>
24
25<script>
26// GrandParent
27export default {
28    provide() {
29        return {
30            user: this.user,
31            theme: this.theme
32        };
33    }
34};
35
36// Child
37export default {
38    inject: ['user', 'theme'],
39    template: '<div :class="theme">{{user.name}}</div>'
40};
41</script>
42
43<!-- Solution 2: Store/State Management -->
44<template>
45    <!-- Child -->
46    <div :class="$store.state.theme">
47        {{$store.state.user.name}}
48    </div>
49</template>

1<script>
2export default {
3    props: {
4        // Good: Primitive values are efficient
5        count: Number,
6        title: String,
7
8        // Caution: Large objects can impact performance
9        largeDataset: {
10            type: Array,
11            // Use function for default to avoid shared references
12            default: () => []
13        }
14    },
15    computed: {
16        // Good: Computed props for expensive operations
17        processedData() {
18            return this.largeDataset.map(item => ({
19                ...item,
20                formatted: this.formatItem(item)
21            }));
22        }
23    },
24    watch: {
25        // Watch for prop changes efficiently
26        'largeDataset.length'(newLength) {
27            console.log(`Dataset size changed to: ${newLength}`);
28        }
29    }
30};
31</script>

1<!-- Child Component: CommentForm.vue -->
2<template>
3    <form @submit.prevent="submitComment" class="comment-form">
4        <h3>Add a Comment</h3>
5
6        <div class="form-group">
7            <label for="author">Name:</label>
8            <input
9                id="author"
10                v-model.trim="formData.author"
11                type="text"
12                required
13                placeholder="Your name"
14            >
15        </div>
16
17        <div class="form-group">
18            <label for="content">Comment:</label>
19            <textarea
20                id="content"
21                v-model.trim="formData.content"
22                required
23                placeholder="Share your thoughts..."
24                rows="4"
25            ></textarea>
26        </div>
27
28        <div class="form-group">
29            <label>
30                <input
31                    v-model="formData.isPrivate"
32                    type="checkbox"
33                >
34                Private comment
35            </label>
36        </div>
37
38        <div class="form-actions">
39            <button type="button" @click="handleCancel">Cancel</button>
40            <button type="submit" :disabled="!isFormValid">
41                Post Comment
42            </button>
43        </div>
44
45        <div v-if="errors.length" class="errors">
46            <p v-for="error in errors" :key="error">{{error}}</p>
47        </div>
48    </form>
49</template>
50
51<script>
52export default {
53    name: 'CommentForm',
54    emits: {
55        // Define emitted events with validation
56        'comment-submitted': (comment) => {
57            return comment && comment.author && comment.content;
58        },
59        'form-cancelled': null, // No validation needed
60        'form-error': (errors) => Array.isArray(errors)
61    },
62    data() {
63        return {
64            formData: {
65                author: '',
66                content: '',
67                isPrivate: false
68            },
69            errors: []
70        };
71    },
72    computed: {
73        isFormValid() {
74            return this.formData.author.trim() &&
75                   this.formData.content.trim() &&
76                   this.formData.content.length >= 10;
77        }
78    },
79    methods: {
80        submitComment() {
81            this.errors = [];
82
83            // Validation
84            if (!this.isFormValid) {
85                this.errors.push('Please fill in all required fields');
86                this.$emit('form-error', this.errors);
87                return;
88            }
89
90            if (this.formData.content.length > 500) {
91                this.errors.push('Comment must be less than 500 characters');
92                this.$emit('form-error', this.errors);
93                return;
94            }
95
96            // Create comment object
97            const comment = {
98                id: Date.now(),
99                author: this.formData.author,
100                content: this.formData.content,
101                isPrivate: this.formData.isPrivate,
102                timestamp: new Date().toISOString()
103            };
104
105            // Emit the event with data
106            this.$emit('comment-submitted', comment);
107
108            // Reset form
109            this.resetForm();
110        },
111
112        handleCancel() {
113            this.resetForm();
114            this.$emit('form-cancelled');
115        },
116
117        resetForm() {
118            this.formData = {
119                author: '',
120                content: '',
121                isPrivate: false
122            };
123            this.errors = [];
124        }
125    }
126};
127</script>
128
129<style scoped>
130.comment-form {
131    background: #f7fafc;
132    border: 1px solid #e2e8f0;
133    border-radius: 8px;
134    padding: 24px;
135    margin-bottom: 24px;
136}
137
138.form-group {
139    margin-bottom: 16px;
140}
141
142.form-group label {
143    display: block;
144    margin-bottom: 4px;
145    font-weight: 600;
146    color: #2d3748;
147}
148
149.form-group input,
150.form-group textarea {
151    width: 100%;
152    padding: 8px 12px;
153    border: 1px solid #cbd5e0;
154    border-radius: 4px;
155}
156
157.form-group input:focus,
158.form-group textarea:focus {
159    outline: none;
160    border-color: #4299e1;
161    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
162}
163
164.form-actions {
165    display: flex;
166    gap: 12px;
167    justify-content: flex-end;
168}
169
170.form-actions button {
171    padding: 8px 16px;
172    border: 1px solid #cbd5e0;
173    border-radius: 4px;
174    cursor: pointer;
175}
176
177.form-actions button[type="submit"] {
178    background: #4299e1;
179    color: white;
180    border-color: #4299e1;
181}
182
183.form-actions button[type="submit"]:disabled {
184    background: #a0aec0;
185    cursor: not-allowed;
186}
187
188.errors {
189    background: #fed7d7;
190    border: 1px solid #fc8181;
191    border-radius: 4px;
192    padding: 12px;
193    margin-top: 16px;
194}
195
196.errors p {
197    margin: 0;
198    color: #c53030;
199}
200</style>

1<!-- Parent Component: BlogPost.vue -->
2<template>
3    <article class="blog-post">
4        <header class="post-header">
5            <h1>{{post.title}}</h1>
6            <div class="post-meta">
7                By {{post.author}} on {{formatDate(post.date)}}
8            </div>
9        </header>
10
11        <div class="post-content">
12            {{post.content}}
13        </div>
14
15        <section class="comments-section">
16            <h2>Comments ({{comments.length}})</h2>
17
18            <!-- Comment Form -->
19            <CommentForm
20                @comment-submitted="handleNewComment"
21                @form-cancelled="handleFormCancel"
22                @form-error="handleFormError"
23            />
24
25            <!-- Comments List -->
26            <div class="comments-list">
27                <CommentItem
28                    v-for="comment in displayedComments"
29                    :key="comment.id"
30                    :comment="comment"
31                    @comment-edited="handleCommentEdit"
32                    @comment-deleted="handleCommentDelete"
33                    @reply-submitted="handleReplySubmitted"
34                />
35            </div>
36
37            <!-- Load More Comments -->
38            <button
39                v-if="hasMoreComments"
40                @click="loadMoreComments"
41                class="load-more-btn"
42            >
43                Load More Comments
44            </button>
45        </section>
46
47        <!-- Success/Error Messages -->
48        <div v-if="message.text" :class="['message', message.type]">
49            {{message.text}}
50        </div>
51    </article>
52</template>
53
54<script>
55import CommentForm from './components/CommentForm.vue';
56import CommentItem from './components/CommentItem.vue';
57
58export default {
59    name: 'BlogPost',
60    components: {
61        CommentForm,
62        CommentItem
63    },
64    data() {
65        return {
66            post: {
67                title: 'Getting Started with Vue.js',
68                author: 'Jane Developer',
69                date: '2024-01-15',
70                content: 'Vue.js is an amazing framework for building user interfaces...'
71            },
72            comments: [],
73            displayedComments: [],
74            commentsPerPage: 5,
75            message: {
76                text: '',
77                type: 'success' // 'success' or 'error'
78            }
79        };
80    },
81    computed: {
82        hasMoreComments() {
83            return this.displayedComments.length < this.comments.length;
84        }
85    },
86    methods: {
87        handleNewComment(comment) {
88            // Add comment to list
89            this.comments.unshift(comment);
90            this.displayedComments.unshift(comment);
91
92            // Show success message
93            this.showMessage('Comment posted successfully!', 'success');
94
95            // Optional: Save to server
96            this.saveCommentToServer(comment);
97        },
98
99        handleFormCancel() {
100            this.showMessage('Comment cancelled', 'info');
101        },
102
103        handleFormError(errors) {
104            this.showMessage(errors.join('. '), 'error');
105        },
106
107        handleCommentEdit(editedComment) {
108            const index = this.comments.findIndex(c => c.id === editedComment.id);
109            if (index !== -1) {
110                this.comments.splice(index, 1, editedComment);
111                this.showMessage('Comment updated successfully!', 'success');
112            }
113        },
114
115        handleCommentDelete(commentId) {
116            this.comments = this.comments.filter(c => c.id !== commentId);
117            this.displayedComments = this.displayedComments.filter(c => c.id !== commentId);
118            this.showMessage('Comment deleted', 'success');
119        },
120
121        handleReplySubmitted(reply) {
122            // Handle nested reply logic
123            const parentComment = this.comments.find(c => c.id === reply.parentId);
124            if (parentComment) {
125                if (!parentComment.replies) {
126                    parentComment.replies = [];
127                }
128                parentComment.replies.push(reply);
129                this.showMessage('Reply posted!', 'success');
130            }
131        },
132
133        loadMoreComments() {
134            const currentLength = this.displayedComments.length;
135            const newComments = this.comments.slice(
136                currentLength,
137                currentLength + this.commentsPerPage
138            );
139            this.displayedComments.push(...newComments);
140        },
141
142        showMessage(text, type = 'success') {
143            this.message = { text, type };
144            setTimeout(() => {
145                this.message.text = '';
146            }, 3000);
147        },
148
149        formatDate(dateString) {
150            return new Date(dateString).toLocaleDateString('en-US', {
151                year: 'numeric',
152                month: 'long',
153                day: 'numeric'
154            });
155        },
156
157        async saveCommentToServer(comment) {
158            try {
159                await fetch('/api/comments', {
160                    method: 'POST',
161                    headers: {
162                        'Content-Type': 'application/json'
163                    },
164                    body: JSON.stringify(comment)
165                });
166            } catch (error) {
167                console.error('Failed to save comment:', error);
168                this.showMessage('Failed to save comment to server', 'error');
169            }
170        }
171    },
172
173    async mounted() {
174        // Load existing comments
175        try {
176            const response = await fetch('/api/comments');
177            const allComments = await response.json();
178            this.comments = allComments;
179            this.displayedComments = allComments.slice(0, this.commentsPerPage);
180        } catch (error) {
181            console.error('Failed to load comments:', error);
182        }
183    }
184};
185</script>