bootstrap-vue 테이블에 대한 세부 정보 표시 문제

bootstrap-vue 테이블에 대한 세부 정보 표시 문제

이 오류를 발견한 사람 및 해결 방법을 알고 계십니까?

백엔드에서 nuxt 및 vuex 모듈을 통해 데이터를 가져와 컴포넌트의 테이블로 돌아갑니다.

[vuex] 변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 않음 메시지가 나타나면 부트스트랩-vue 테이블의 세부 정보를 전환하려고 시도할 때까지 이 모든 것이 정상적으로 작동합니다.숨겨진 디테일이 아무것도 없어도

이 문제가 발생한 적이 있습니까? 있다면 어떻게 수정해야 합니까?

대단히 고맙습니다

예, 이는 bootstrap-vue가 테이블을 생성하기 위해 bootstrap-vue에 공급되는 개체의 어레이를 관리하는 방법 때문에 발생합니다.

b-table 컴포넌트를 정의하고 :items 속성을 통해 항목 목록을 제공하면 컴포넌트는 어레이를 사용하여 변환하고 함수 및 속성을 추가합니다.이 프로세스는 돌연변이 함수 외부의 돌연변이에 대한 Vuex 제약 조건을 트리거하지 않는 것으로 보입니다.

그러나 추가된 함수 중 하나를 호출하면 이 경우 row.toggleDetails 함수가 Vuex 저장소에서 돌연변이를 인식하고 오류를 발생시킵니다.

문제를 해결하려면 두 가지 방법이 있을 수 있습니다.

우선, 단순한 Vuex 스토어에서 조작하고 있는 경우는, 다음의 코드 라인을 스토어에 추가할 수 있습니다(이 호에서 참조).https://github.com/nuxt/nuxt.js/issues/1917#issuecomment-338471402):

export const strict = false

이것은 돌연변이에 대한 제약을 없앨 것이다.이것은 단순한 어플리케이션에만 적합합니다.

가장 좋은 옵션은 계산된 속성에서 지도 함수를 사용하는 것입니다.

computed: {
    myTableArr() {
         this.$store.getters['myTableArr'].map(mta => mta);
    }
}

이 보호 조치를 적용하면 Vuex 어레이에 대한 참조가 아닌 새 어레이를 반환하게 됩니다.이제 bootstrap-vue b-table 컴포넌트는 이를 변경할 수 있으며 Vuex 오류의 결과 없이 코드에서 이러한 변경을 사용할 수 있습니다.

또한 일반적으로 지도 함수에서 컨스트럭터를 사용하기 때문에 다음과 같습니다.

.map(mta => new modelConstructor(mta))

이 문제를 회피하기 위해 실행한 작업을 수행하는 것은 다소 번거롭지만, b-table에 표시된 오브젝트에 대한 _showDetails 속성을 정의했습니다.여기서 세트가 변환을 호출하고 경고가 사라집니다.Vuex의 경고를 글로벌하게 끌 필요는 없습니다.

class myObject {
    constructor() {
        ...
        this.__showDetails = false
    }
    ...
    get _showDetails () { return this.__showDetails }
    set _showDetails (value) {
        store.commit('toggleRowDetailsvisibility', {ref: this, val: value})
    }
}

그리고 데이터 스토어에서 다음과 같은 돌연변이를 정의했습니다.

toggleRowDetailsvisibility(state, parameters){
    parameters.ref.__showDetails = parameters.val
}

상기 코드의 싱글과 더블에 주목해 주십시오.

저도 같은 문제가 있었어요.그러나 vuex-map-fields 패키지를 사용하여 수정할 수 있었습니다.이를 통해 Vuex에 양방향 데이터 바인딩이 가능합니다.즉, Bootstrap-vue 테이블은 Vuex 오류를 발생시키지 않고 기본 데이터를 변환할 수 있습니다.

계산 부동산의 지도 기능은 작동해야 한다고 생각하지만, 작동하지 않았습니다.

언급URL : https://stackoverflow.com/questions/50999741/issue-with-show-details-on-bootstrap-vue-table