Vuejs2 VueJs选择绑定不工作

我有一个类别组件，如下所示：

<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>

<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">&times;</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>

{{category.name}
导出默认值{
数据（）{
返回{
类别：[]
}
},
创建（）{
这是showCategories（）；
},
方法：{
showCategories（）{
获取（'/app/categories'）。然后（响应=>{
this.categories=response.data.categories；
});
}
}   
}

我将此组件导入到我的帖子组件中，因为我希望在添加新帖子时能够选择一个类别，但是，由于某些原因，这些类别不会显示

如果有帮助，“我的帖子”组件如下所示：

<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>

<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">&times;</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>

添加帖子
身份证件
标题
身体
所有者
类别
创建于
更新于
{{post.id}
{{post.title}}
{{post.body | snippet}}
{{post.user.name}
{{post.category.name}
{{post.created_at}}
{{post.updated_at}}
编辑
删除
&时代；
模态头
标题
身体
提交
接近
导出默认值{
数据（）{
返回{
员额：[]，
职位：{
标题：“，
正文：“”
},
搜索：“
//类别：[]
}
},
创建（）{
this.showPosts（）；
//这是showCategories（）；
},
方法：{
/*showCategories（）{
获取（'/app/categories'）。然后（响应=>{
this.categories=response.data.categories；
});
},*/
展板（）{
get（'/app/posts'）。然后（响应=>{
this.posts=response.data.posts；
});
},
addPost（）{
axios.post（“/app/posts”{
标题：this.post.title，
body:this.post.body，
})
。然后（响应=>{
this.showPosts（）；
//console.log（'Added'）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
},
计算：{
filteredPosts:函数（）{
返回此.posts.filter（（post）=>{
返回post.title.match（this.search）；
});
}
}
}

OBS：如果我在categories组件中使用这样的li标记，我会设法查看所有类别：

<li v-for="category in categories">{{category.name}}</li>

{{category.name}

---

如何使用select绑定在posts组件中显示我的类别？

在select元素中，您将v-model绑定到数组类别，而不是像这样在v-model中绑定另一个变量selectedCategory

<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>

{{category.name}
导出默认值{
数据（）{
返回{
selectedCategory:空，
类别：[]
}
},
创建（）{
这是showCategories（）；
},
方法：{
showCategories（）{
获取（'/app/categories'）。然后（响应=>{
this.categories=response.data.categories；
});
}
}   
}