VueJs选择绑定不起作用

Question

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

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

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

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

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

OBS：如果我在类别组件中使用这样的li标签，我会看到所有类别：

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

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

Answer 1

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