Vue.js and Laravel update multiple rows with one call

Question

For a better understanding, here are two of my models.

Model for images:

class Image extends Model
{

...    

    public function item()
    {

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

Model an item:

class Item extends Model
{

...    

    public function images()
    {

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

In my view I am using a mixture of laravel's blade engine and Vue.js which looks like this:

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

This gives my one input for any image of the item. By changing the value of each image I want to update all database. I do not know if it is a good practice to name the input like name="images[]" to get an array.

My database table for images looks like this:

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

Hopefully, some of you had the same problem in the past and can help me out.

Justin MacArthur · Accepted Answer · 2016-10-14 21:29:22Z

3

you need to pass an id to the system so that you can grab them on the other side to update the database.

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

this will send an array in the Request object in the format of "id" => "url" which should let you update the images appropriately

answered Oct 14, 2016 at 21:29

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js and Laravel update multiple rows with one call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related