访问Vue JS实例监视对象内的$ refs数组

Question

我正在构建一个Vue JS SPA，并且在v-app内部有一个Vuetify数据表。我正在尝试在监视对象内为数据表内的filteredItems计算属性设置一个变量，但是我不确定如何访问实例内的$ refs数组。

我知道可以使用以下方法在实例内访问数据：

this.$refs['prospectsTable'].filteredItems

但是，相同的引用名称在watch对象中不起作用。我试过了：

$refs['prospectsTable'].filteredItems: function(newItems) {

            console.log(newItems);

        }

&

this.$refs['prospectsTable'].filteredItems: function(newItems) {

            console.log(newItems);

        }

我如何访问watch函数内部的$ refs数组？

var p = new Vue({

    el: '#prospectsApp',

    data: () => ({}), 

    watch: function() {

        // How can i access the $refs array inside of the watch function?

        $refs['prospectsTable'].filteredItems: function() {

        }

    }

});

<div id="prospectsApp">

    <v-app id="inspire" v-cloak>

        <v-data-table ref="prospectsTable" v-model="selected" :headers="headers" :items="prospects" :pagination.sync="pagination" select-all item-key="id" class="elevation-1" > 

            <template v-slot:headers="props">

                <tr>

                    <th><v-checkbox :input-value="props.all" color="#c79121" :indeterminate="props.indeterminate" primary hide-details @click.stop="toggleAllSelected"></v-checkbox></th>

                    <th v-for="header in props.headers" :key="header.text"

                        :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"

                        @click="changeSort(header.value)">

                        <v-icon small>arrow_upward</v-icon>

                        @{{ header.text }}

                    </th>

                </tr>

            </template>

                    </td>

                </tr>

            </template>

            <template slot="no-data">

                <p class="text-xs-center">No Data</p>

            </template>                                

        </v-data-table>

    </v-app>

</div>

Answer 1

由于声明组件的位置，它可能位于$ root中。如果$refs.prospectsTable不起作用，请尝试$root.$refs.prospectsTable。也许这也应该是观察者中的字符串，如下所示：watch: {&nbsp; &nbsp;'$refs.prospectsTable.filteredItems': function (value) {&nbsp; &nbsp; &nbsp; &nbsp;console.log(value);&nbsp; &nbsp;}}