Блог

В моем компоненте Vue у меня есть флажок со @change слушателем, который связывается с серверной частью Laravel, серверная часть присоединяет или отсоединяет связь на основе идентификаторов элементов, которые передаются.

Метод конечной точки Laravel выглядит следующим образом:

 public function updateRecord(Request $request)
{
  $program = Program::with('records')
    ->where('id', $request->program)
    ->first();

  if ($request->status) {
    $program->records()
      ->attach($request->record);
  } else {
    $program->records()
      ->detach($request->record);
  }

  $next = $program->fresh(['redlists', 'form', 'option', 'records']);
  
  return response($next);
}
 

1. Возьмите Program модель id с records помощью отношений
2. Если флажок attach установлен, идентификатор записи
3. Если флажок не detach установлен, идентификатор записи
4. Получите свежий экземпляр модели со всеми исходными отношениями для Vue

Вот весь блок сценария, вызов серверной части которого является updateProgram методом:

 import { mapGetters, mapActions } from 'vuex'
import Program from '@/models/programs/Program'

export default {
    props: {
        programid: {
            required: true,
            type: Number
        }
    },
    data() {
        return {
            records: []
        }
    },
    mounted() {
        this.parseRecords()
    },
    computed: {
        ...mapGetters({
            record: 'builder/getRecordObject'
        }),
        program() {
            return Program.query().with('records').where('id', this.programid).first()
        },
        selected() {
            return this.records.includes(this.record.id)
        }
    },
    methods: {
        ...mapActions({
            flash: 'topToast'
        }),
        parseRecords() {
            this.program.records.map(record => {
                this.records.push(record.id)
            })
        },
        updateProgram(e) {
            this.records = []

            Program.api()
                .put(this.route('actions.programs.record'), {
                    record: this.record.id,
                    program: this.program.id,
                    status: e.target.checked
                })
                .then(response => {
                    this.parseRecords()
                
                    this.flash({
                        class: 'success',
                        text: 'The program was updated successfully.'
                    })
                })
                .catch(error => {
                    console.log(error)
                })
        }
    }
}
 

Итак, вот что происходит.

Я начинаю с того, что флажок снят, и с одной уже прикрепленной записи.

My Vuex store for the program records looks like so:

I check the box, the event fires, the backend attaches the record and return a new Program object and VuexORM updates as expected.

Now if I uncheck the box, the event fires, the backend detaches the record and returns a fresh Program object, but VuexORM does not update to remove the record relationship.

You can see here that the record relationship is removed in the object that comes back from the server:

but when I console log this.program.records , the ORM program.records have not updated correctly.

The VuexORM documentation does not discuss deleting relationships, only parent models.

How is it possible to keep my relationships in sync?