Vue.js和Laravel通过一次调用

时间:2016-10-14 09:59:25

标签: database laravel eloquent vue.js

为了更好地理解,这里有两个模型。

图片模型

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 个答案:

答案 0 :(得分: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>

这将在Request对象中以“id”=&gt;的格式发送一个数组。 “url”应该让你适当地更新图像