2016-10-14 35 views
1

为了更好地理解,以下是我的两个模型。Vue.js和Laravel通过一次调用更新多行

模型图像

class Image extends Model 
{ 

...  

    public function item() 
    { 

     return $this->belongsTo(Item::class); 
    } 
} 

型号项目:

class Item extends Model 
{ 

...  

    public function images() 
    { 

     return $this->hasMany(Image::class); 
    } 
} 

在我看来,我使用laravel的叶片发动机的混合物,Vue.js看起来像这样:

<div class="form-group"> 
    <label>@lang('app.user.edit.images')</label> 
    <div v-for="(img, index) in my.images"> 
     <input type="text" name="images[]" class="form-control images" v-model="my.image"> 
    </div> 
</div> 

这给我一个输入的任何图像的项目。通过更改每个图像的值我想更新所有数据库。我不知道将name="images[]"这样的输入命名为数组是否是一种好的做法。

我对图像数据库表看起来像这样:

+----+---------+-------+------------+------------+ 
| id | item_id | image | created_at | updated_at | 
+----+---------+-------+------------+------------+ 

希望,你们当中有些人在过去同样的问题,可以帮助我。

回答

3

您需要将ID传递给系统,以便您可以在另一端抓取它们以更新数据库。

<div class="form-group"> 
    <label>@lang('app.user.edit.images')</label> 
    <div v-for="img in my.images"> 
     <input 
      type="text" 
      v-bind:name="'images[' + img.id + ']'" 
      class="form-control images" 
      v-model="img.image" 
     > 
    </div> 
</div> 

,这将在“ID” =>“URL”,其应该让你适当地更新图像

的格式发送在请求对象的阵列