Vue.js 和 Laravel 一次调用更新多行

Posted 2023-02-22

【中文标题】Vue.js 和 Laravel 一次调用更新多行

【英文标题】：Vue.js and Laravel update multiple rows with one call

【发布时间】：2017-02-23 17:16:38

【问题描述】：

为了更好地理解，这是我的两个模型。

图像模型：

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

希望你们中的一些人过去也遇到过同样的问题，可以帮助我。

【参考方案1】：

您需要将一个 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”的格式发送一个数组，它应该可以让您适当地更新图像