Select Box Binding

Select Box Binding

The final piece of the blog form is a select box for choosing the blog author. v-model works on <select> elements just like text inputs.

Single Select

<label>Author:</label>
<select v-model="blog.author">
    <option value="" disabled>Select an author</option>
    <option value="Shaun">Shaun</option>
    <option value="Mario">Mario</option>
    <option value="Yoshi">Yoshi</option>
</select>

<p>Author: {{ blog.author }}</p>

data: {
    blog: { author: '' }
}

The selected option's value is set on blog.author. The disabled first option acts as placeholder text.

Dynamic Options

<select v-model="blog.author">
    <option v-for="author in authors" :key="author" :value="author">
        {{ author }}
    </option>
</select>

data: {
    authors: ['Shaun', 'Mario', 'Yoshi', 'Ken'],
    blog: { author: '' }
}

Complete Blog Form

<form @submit.prevent="addPost">
    <input type="text" v-model="blog.title" placeholder="Title">
    <textarea v-model="blog.content" placeholder="Content"></textarea>

    <div class="checkboxes">
        <label v-for="cat in availableCategories" :key="cat">
            <input type="checkbox" :value="cat" v-model="blog.categories"> {{ cat }}
        </label>
    </div>

    <select v-model="blog.author">
        <option v-for="author in authors" :key="author">{{ author }}</option>
    </select>

    <button>Add Post</button>
</form>

Key Takeaways

• v-model on <select> binds the selected option's value to data
• Use v-for to generate options dynamically from an array
• Combine text inputs, textareas, checkboxes, and selects — all bound with v-model