소품으로 전달된 배열에서 객체를 어떻게 반응적으로 제거하여 DOM에 반영할 수 있는가?

소품으로 전달된 배열에서 객체를 어떻게 반응적으로 제거하여 DOM에 반영할 수 있는가?

다음 블레이드 파일이 있다.

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-7 mx-auto">
                <items :items="{{ $items  }}" />
            </div>
        </div>
    </div>
@endsection

어디에$items컨트롤러에서 꺼낸 물체의 JSON 배열이다.자, 더items구성 요소는 다음과 같다.

<template>
    <div>
        <item v-for="(item, key) in computedItems" :key="key" :item="item"/>
    </div>
</template>

그computedItems특성:

computed: {
    computedItems() {
        // referring to the prop that is passed from the blade file
        let items = this.items;

        if (this.filterOptions.type !== 'Clear') {
            items = items.filter(i => i.status === this.filterOptions.type);
        }

        if (this.searchOptions.query.trim() !== '') {
            items = items.filter(
                i => i.name.toLowerCase().indexOf(this.searchOptions.query.toLowerCase()) !== -1
            );
        }

        if (this.sortOptions.type === 'asc') {
            items.sort((a, b) => a.id - b.id);
        } else if (this.sortOptions.type === 'desc') {
            items.sort((a, b) => b.id - a.id);
        }

        return items;
    }
}

인item삭제할 수 있는 하위 구성 요소items다음과 같은 방법으로:

methods: {
    _delete() {
        const _confirm = confirm('Are you sure you want to delete this item?');

        if (!_confirm) {
            return;
        }

        axios.delete(`/items/${this.item.id}`).then(response => {
            this.$eventBus.$emit('deleted', { id: this.item.id })
        });
    }
}

이벤트는 부모에 의해 선택된다.items구성 요소) 및 취급:

deleted(item) {
    const i = this.items.findIndex(_i => item.id === _i.id);

    this.items.splice(i, 1);
}

그런데 웬일인지 DOM은 업데이트되지 않고 있다.v-for삭제된 개체는 여전히 표시되지만, 소품을 버리면 개정이 되었음을 나타낸다.나의 의심은 부에가 그 물체가 수정되었다는 것을 알 수 없다는 것이다.propsA가 아닌data다음 사항을 시도해 보았다.

• 사용.Vue.delete대신에Array.splice
• 사용.this.$delete대신에Array.splice
• 사용.Array.splice소품 대신 계산된 소품 위에.
• 감시자 설정
• 게터 및 세터를 허용하도록 계산된 속성 확장
• Vue 포럼에 대한 많은 검색

자, 그게 반패턴이기 때문에 직접 소품을 변이할 수 없다는 것을 이해한다. 그래서 계산된 소품을 사용했지만, 여전히, 나의 변화는 DOM에 반영되지 않는다.

그렇다면, 왜 DOM은 업데이트되지 않는 것일까?

요청된 대로 내 의견을 게시하면 이 항목의 핵심 사항을 나열할 것이다.

• 단방향 데이터 흐름: 프로펠러 돌연변이 없음.구성 요소에서 로컬로 변이해야 하는 받침대가 있는 경우 먼저 데이터에 복제하고 복제본을 변이하십시오.

• 상태/이벤트 관리에 이벤트 버스 대신 Vuex 사용

• Vuex는 구성 요소 내부(또는 다른 곳)에서 작업을 통해 통제된 방식으로 변이될 수 있는 글로벌 상태를 허용한다.데이터는 저장소에서 아래로 흘러내려 매핑된/호출된 액션을 통해 방출된다.

참조URL: https://stackoverflow.com/questions/59337627/how-can-i-reactively-remove-an-object-from-an-array-which-is-passed-as-a-prop-so