VueJs select binding is not working - vuejs2

Question

I have a categories component that looks like this:
<template>
<div>
<select v-model="categories">
<option v-for="category in categories" v-bind:value="category\.id">
{{category.name}}
</option>
</select>
</div>
</template>
<script>
export default {
data(){
return{
categories: []
}
},
created(){
this.showCategories();
},
methods: {
showCategories(){
axios.get('/app/categories').then(response => {
this.categories = response.data.categories;
});
}
}
}
</script>
I import this component inside my posts componen because I want to be able to choose a category when adding a new post, however, the categories for some reason do not show.
If it helps, my posts component looks like this:
<template>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add Post</button>
<div class="form-group">
<input type="text" v-model="search" class="form-control" id="search">
</div>
<categories></categories>
<table class="table">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
<th>Owner</th>
<th>Category</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
<tbody>
<tr v-for="post in filteredPosts">
<td>{{ post.id }}</td>
<td>{{ post.title }}</td>
<td>{{ post.body | snippet }}</td>
<td>{{ post.user.name }}</td>
<td>{{ post.category.name }}</td>
<td>{{ post.created_at }}</td>
<td>{{ post.updated_at }}</td>
<td><button class="btn btn-primary">Edit</button></td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Title</label>
<input type="text" v-model="post.title" class="form-control">
</div>
<div class="form-group">
<label>Body</label>
<textarea v-model="post.body" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button #click.prevent="addPost" type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
posts: [],
post: {
title: "",
body: ""
},
search: ""
//categories: []
}
},
created(){
this.showPosts();
//this.showCategories();
},
methods: {
/*showCategories(){
axios.get('/app/categories').then(response => {
this.categories = response.data.categories;
});
},*/
showPosts(){
axios.get('/app/posts').then(response => {
this.posts = response.data.posts;
});
},
addPost(){
axios.post('/app/posts', {
title: this.post.title,
body: this.post.body,
})
.then(response => {
this.showPosts();
//console.log('Added');
})
.catch(function (error) {
console.log(error);
});
}
},
computed: {
filteredPosts: function(){
return this.posts.filter((post) => {
return post.title.match(this.search);
});
}
}
}
</script>
OBS: If I use an li tag like this inside the categories component I manage to see all the categories:
<li v-for="category in categories">{{category.name}}</li>
How can I show my categories inside the posts component using the select binding?

Answer 1

In your Select element you are binding v-model to array categories instead bind another variable selectedCategory in v-model like this
<select v-model="selectedCategory">
<option v-for="category in categories" v-bind:value="category.id">
{{category.name}}
</option>
</select>
<script>
export default {
data(){
return{
selectedCategory:null,
categories: []
}
},
created(){
this.showCategories();
},
methods: {
showCategories(){
axios.get('/app/categories').then(response => {
this.categories = response.data.categories;
});
}
}
}
</script>