Vue.js и Laravel обновляет несколько строк одним вызовом

#database #laravel #eloquent #vue.js

#База данных #laravel #красноречивый #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:

вам нужно передать идентификатор системе, чтобы вы могли получить их на другой стороне для обновления базы данных.

 <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», который должен позволить вам соответствующим образом обновлять изображения