Vue.js 및 Vuetify 슬롯 스코프

Question

슬롯 스코프가 어떻게 작동하는지 잘 모르겠습니다. 누군가가이 (겉으로보기에) 꽤 간단한 문제로 나를 도울 수 있는지 궁금합니다.

<v-data-table> 
    <template slot="items" slot-scope="props"> 
     <tr @click="props.expanded = !props.expanded"> 

내가 할 일은 "외부 이벤트를 기반으로이 행을 확장하기 위해 수동으로" "props"를 업데이트하는 것입니다. 문제는 위의 컨텍스트 외부에서 액세스하는 방법을 파악할 수 없다는 것입니다. props.expanded =! props.expanded는 정상적으로 작동합니다.

아이디어가 있으십니까?

Answer 1

구성 요소에 내장 된 방법이없는 것처럼 보입니다. 데이터 테이블은 자체적으로 확장 된 객체이므로 생성 된 프로퍼티는 사용하지 않습니다.

참조을 사용할 수 있습니다. Vue page on child component refs.

다음 코드는 데이터 테이블의 참조를 accesshere으로 설정합니다.

<v-data-table ref="accesshere" :headers="headers" :items="dataTable" 
:search="search" item-key="id"> 

이제 사용하여 해당 개체에 액세스 할 수 있습니다 여기에

this.$refs.accesshere.expanded['nameofkey'] = false이 행동을 보여주는 codepen이다 (확장 된 테이블 행을 닫습니다 false로 설정).

확장 된 개체에 문제가 있으며 행을 처음으로 확장 할 때까지 채워지지 않습니다. 그래서 당신이 다음과 같이하면. 이러한 변경 사항은 표시되지 않으며 (구성 요소를 강제로 업데이트하지 않는 한) 행이 바로 확장되지 않습니다.

methods: { 
    itemShow() { 
    this.$refs.accesshere.expanded['2'] = true 
    this.$forceUpdate() // This works, I don't know if it is recommended though 
    } 
}