访问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: {

   '$refs.prospectsTable.filteredItems': function (value) {

       console.log(value);

   }

}