使用 Vue3 和 Inertiajs 更新 return 数组 ["isTrusted" => true] Laravel

Question

我尝试进行更新我在 Laravel 8 中进行了调试像那样:

控制器中的编辑和更新功能

public function edit($categories)
    {
        $categories = new CategoriesResources(Categories::findOrFail($categories));
        $categories->image;
        return Inertia::render('Categories/Edit', [
            'categories' => $categories,
        ]);    
    }

public function update(Request $request, $categories)
    {
        $categories = Categories::find($categories);
        dd($request->img_url);
        die;
    }

Vue 模板

<template>
   <form @submit.prevent="editCat">
      <input id="cat_name" type="text" v-model="category.cat_name" />
      <input @change="newImage" name="img_url" id="img_url" accept="image/*" type="file" />
      <input type="submit" value="update" /> 
   </form> 
</template>

props: {
    errors: Object,
    categories: Object
},

data(){
    return{
       category:{
          cat_id: this.categories.data.cat_id,
          cat_name: this.categories.data.cat_name,
          created_at: this.categories.data.created_at,
          updated_at: this.categories.data.updated_at,
          _method: 'put'
       },
       img_url: null
    }
},

methods:{
   newImage(e){
       this.img_url = e.target.files[0]
   },
   editCat(){
       this.$inertia.put(`/categories/${this.categories.data.cat_id}`,{
           'img_url' : this.img_url,
       });
   }
}

它 return 表单中的数据，但 图像文件有问题 它 return 在更改图像文件并提交后进行调试：

array ["isTrusted" => true]

我在这样的表格中添加了：

<form @submit.prevent="editCat" enctype="multipart/form-data" method="POST">

没有变化

我尝试 return 来自 props 的图像，但没有任何改变

Answer 1

我已经解决了问题

<input @change="newImage( $event.target.files[0] )" />

使用 Vue3 和 Inertiajs 更新 return 数组 ["isTrusted" => true] Laravel

update return array ["isTrusted" => true] Laravel with Vue3 and Inertiajs

php

inertiajs

laravel

vue.js