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

Posted 2023-02-23

【中文标题】访问 Vue JS 实例监视对象中的 $refs 数组

【英文标题】：Accessing $refs array inside a Vue JS Instance watch object

【发布时间】：2019-08-18 15:41:06

【问题描述】：

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

我知道可以通过以下方式在实例中访问数据：

this.$refs['prospectsTable'].filteredItems

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

$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>

            <template v-slot:items="props">
                <tr :active="props.selected" @click="props.selected = !props.selected">
                    <td class="text-center align-middle">
                        <v-checkbox :input-value="props.selected" primary hide-details color="#c79121"></v-checkbox>
                    </td>
                    <td class="text-center align-middle">@ props.item.id </td>
                    <td>
                        <div>@ props.item.name </div>
                        <div v-show="props.item.contacted" class="label label-success"><span class="fa fa-check-square-o"></span> Contacted!</div>
                    </td>
                    <td>@ props.item.foodcat.title </td>
                    <td>@ props.item.contact_fname <span v-if="props.item.contact_lname"> @ props.item.contact_lname </span><span v-if="props.item.contact_title">, @ props.item.contact_title </span></td>
                    <td>@ props.item.response_notes </td>
                    <td class="text-right align-middle">
                        <button class="btn btn-primary btn-sm" @click="updateContacted(props.item.id)" v-show="!props.item.contacted"><span class="fa fa-check-square-o"></span> Mark As Contacted</button>
                        <button class="btn btn-primary btn-sm" @click="editProspect(props.item.id)"><span class="fa fa-edit"></span> Edit Lead</button>
                        <button class="btn btn-danger btn-sm" @click="removeProspect(props.item.id)"><span class="fa fa-trash"></span> Delete Lead</button>
                    </td>
                </tr>
            </template>
            <template slot="no-data">
                <p class="text-xs-center">No Data</p>
            </template>                                
        </v-data-table>
    </v-app>
</div>

【问题讨论】：

您是否尝试过import Vue from "vue";，然后使用全局变量Vue.$refs？

【参考方案1】：

最好的方法是在mounted上添加watcher。试试下面的代码。

mounted()
       this.$watch(
        () => 
            return this.$refs.prospectsTable.filteredItems
        ,
      (val) => 
        console.log(val)
        alert('App $watch $refs.counter.i: ' + val)
      
    )
  

Codepen - https://codesandbox.io/s/j7wjjypnxw

【讨论】：

谢谢。它对我有帮助。喜欢

【参考方案2】：

由于声明它的组件的位置，它可能位于 $root 中。

如果$refs.prospectsTable 不起作用，请尝试$root.$refs.prospectsTable。

也许这也应该是观察者中的键作为字符串：

watch: 

   '$refs.prospectsTable.filteredItems': function (value) 
       console.log(value);