Vue.js 和 Vuetify 插槽范圍

Question

我真的只是不確定插槽范圍是如何工作的。 想知道是否有人可以幫助我解決這個（看似）非常簡單的問題。

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

我要做的是手動更新“道具”以根據外部事件擴展這一行。 問題是，我無法弄清楚如何在上述上下文之外訪問它。 props.expanded = !props.expanded工作得很好。

有任何想法嗎？

Answer 1

該組件似乎沒有內置方法。 由於數據表創建它自己的擴展對象並且不使用傳入的道具。

您可以使用ref 。 子組件 refs 上的 Vue 頁面。

以下代碼會將數據表上的 ref 設置為accesshere 。

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

現在您可以通過使用（將 this 設置為 false 將關閉展開的表格行） this.$refs.accesshere.expanded['nameofkey'] = false來訪問該對象

這是一個顯示它的代碼筆。

展開的對象存在問題，直到您第一次展開一行時才會填充它。 因此，如果您執行以下操作。 它不會看到這些更改（除非您強制組件更新），因此不會立即展開該行。

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