首页 > 解决方案 > 在 Laravel 的 Vue 组件上将数据渲染到模态时出现问题

问题描述

模态表单(Posts.vue)

                       <label>Category</label>
                       <select class="form-control" v-model="form.category_id">
                            <option 
                            v-for="(cat,index) in categories" :key="index"
                            :value="index"
                            :selected="index == form.category_id">{{ cat }}</option>
                       </select>

Posts.vue 组件中的数据和方法

        data(){
        return{
            editmode: false,
            posts: {},
            form: new Form({
                id: '',
                category: '',
                title : '',
                content : '',
                image : '',
                author_id : '',
                published: '',
                category_id: '',
            }),
            categories: [],    
        }
    },
            methods: { showCategories(){
              axios.get("api/category/list").then(({ data }) => (this.categories =data.data));
          },

}

路线

Route::get('category/list',[CategoryController::class,'list']);

类别控制器

    public function list()
{
    return Category::latest()->pluck('name','id');
}

帖子控制器

        return Post::create([
            'title' => $request['title'],
            'content' => $request['content'],
            'image' => $request['image'],
            'author_id' => $user->id,
            'category_id' => $request['category_id']
        ]);

在将它们的 id 插入数据库之前尝试让模式在下拉列表中显示类别名称,但没有通过 pluck 方法从服务器中继数据。我错过了什么?

标签: laravelvue.js

解决方案


推荐阅读