Input Binding (Creating a blog, part 1)

Input Binding (Creating a blog, part 1)

Let us start building a simple blog to practice what you have learned. In this episode you will create a form for adding blog posts using v-model to bind inputs to your data.

The Blog Form

<template>
    <div id="add-blog">
        <h2>Add a New Blog Post</h2>
        <form @submit.prevent="addPost">
            <label>Blog Title:</label>
            <input type="text" v-model="blog.title" required>

            <label>Blog Content:</label>
            <textarea v-model="blog.content"></textarea>

            <div id="preview">
                <h3>{{ blog.title }}</h3>
                <p>{{ blog.content }}</p>
            </div>

            <button type="submit">Add Post</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            blog: { title: '', content: '', categories: [], author: '' }
        };
    },
    methods: {
        addPost() {
            console.log('Post:', this.blog);
        }
    }
};
</script>

As the user types, the preview section updates in real time thanks to v-model's two-way binding. The form data is stored in a single blog object for easy submission.

Key Takeaways

• v-model on inputs binds form data to your Vue data properties in real time
• Group related form fields into a single object (blog) for cleaner data management
• Use @submit.prevent to handle form submission without page reload
• Live preview of data is easy — just reference the bound properties in the template