CODEWITHSUNDEEP
databaselaraveleloquentvue.js
Sebastian Rush
Sebastian Rush

Reputation: 538

Vue.js and Laravel update multiple rows with one call

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.

Upvotes: 1

Views: 1160

Answers (1)

Justin MacArthur
Justin MacArthur

Reputation: 4050

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

Upvotes: 3

Related Questions