有没有办法在 laravel 和 nuxt 中编辑多对多关系

Question

所以我有一个创建帖子页面，其中包含类别供用户附加到他们想要创建的帖子。

因此，当用户想要创建帖子时，他们可以添加图像。

但是，当用户想要编辑帖子时，会显示与帖子一起创建的类别，但一旦取消选中，它就会从数据库中删除，并且编辑页面上不会显示任何类别。

我如何确保即使未选中类别，它也会显示新的类别供用户检查。

我的 vue 编辑页面中有这个。

 <div class="mt-2">
                            <span class="block uppercase text-blueGray-600 text-xs font-bold mb-2">Categories</span>
                            <div v-if="categories ? categories.length : 0">
                              <div v-for="(category, i) in categories" :key="i">
                                <label class="inline-flex items-center">
                                  <input type="checkbox" class="form-checkbox" v-model="category.id" 
                                    :value="category.id"
                                  >
                                  <span class="ml-2" v-html="category.name"></span>
                                </label>
                              </div>
                            </div>
                            <div v-else>
                              <div v-for="(mainCategory, i) in mainCategories" :key="i">
                                <label class="inline-flex items-center">
                                  <input type="checkbox" class="form-checkbox" v-model="catSelected" 
                                    :value="mainCategory.id"
                                  >
                                  <span class="ml-2" v-html="mainCategory.name"></span>
                                </label>
                              </div>
                            </div>
                          </div>

脚本.vue

<script>
export default {
  middleware: 'auth',
  name: 'PostEdit',
  components:{
    LeftBar,
    TopBar,
    Footer,
    PostError,
    'editor': Editor
  },
  data:() =>({
    errors: [],
    title: '',
    body: '',
    excerpt: '',
    categories: [],
    mainCategories: [],
    catSelected: [],
  }),
  async fetch(){
    await this.$axios.get('/api/post/'+this.$route.params.id)
    .then(response => {
      this.title = response.data.post.title
      this.body = response.data.post.body
      this.excerpt = response.data.post.excerpt
      this.categories = response.data.categories
      this.mainCategories = response.data.mainCategories
    })
  },
  methods: {
    async updatePost(){
      this.errors = []
      await this.$axios.put('/api/post/update/'+this.$route.params.id , {
        title: this.title,
        body: this.body,
        excerpt: this.excerpt,
        categories: this.categories.id,
        mainCategories: this.catSelected
      }).then(()=> this.$router.push('/posts'))
      .catch(error => {
        if(error.response.status !== 422) throw error

        this.errors = Object.values(error.response.data.errors).flat()
      })

    },
    async updateCategories(){
        console.log(this.categories)
    },
    goBack(){
      this.$router.go(-1)
    }
  },
  head(){
    return{
      title: 'Update Post - ' + this.title
    }
  },
}
</script>

后控制器

 * Display/Edit the specified post.
     *
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $post = Post::find($id);
        $mainCat = Category::all();
        $cat = $post->categories()->get();
        return response()->json([
            'post' => $post, 
            'categories' => $cat,
            'mainCategories' => $mainCat
        ]);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(PostRequest $request, Post $post)
    {
        $post->update([
            'title' => $request->title,
            'body' => $request->body,
            'excerpt' => $request->excerpt,
        ]);

        $post->categories()->sync($request->categories);
        $post->categories()->sync($request->mainCategories);

        return response()->json([
            'post' => $post,
            'message' => 'Post updated successfully.'
        ], 200);
    }

Answer 1

如果我理解正确，当您编辑帖子并取消选择类别时，您希望它向 select 新类别的用户显示所有类别列表，对吗？

那么就很简单了，当没有为相关帖子选择的类别记录时，你只需要获取类别列表并用 v-if 显示它。