Vue.jsとVuetifyスロットスコープ

Question

スロットスコープの仕組みは本当に分かりません。誰かがこの（見かけ上）かなり簡単な問題で私を助けることができるかどうか分かります。

私が探しているのは、外部イベントに基づいてこの行を拡張するために手動で "props"を更新することです。問題は、私は上記の文脈の外でこれにアクセスする方法を理解することができないということです。 props.expanded =！props.expandedはうまく動作します。

アイデア？

Answer 1

コンポーネントに組み込まれている方法はありません。データテーブルは独自の展開オブジェクトを作成するので、渡された小道具は使用しません。

refを使用できます。 Vue page on child component refs。

次のコードは、データテーブルの参照をaccesshereに設定します。

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

今、あなたが使用してそのオブジェクトにアクセスできるようになります（これをfalseに設定し、拡張テーブルの行を終了します）this.$refs.accesshere.expanded['nameofkey'] = false

ここでは、アクションでそれを示すcodepenあります。

拡張されたオブジェクトに問題があり、最初に行を展開するまでは挿入されません。だから、あなたが次のようなことをすれば。これらの変更は表示されません（コンポーネントの更新を強制しない限り）ので、行をすぐに展開することはありません。

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