访问 Vue JS 实例监视对象内的 $refs 数组 [英] Accessing $refs array inside a Vue JS Instance watch object

问题描述

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

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

this.$refs['prospectsTable'].filteredItems

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

$refs['prospectsTable'].filteredItems: function(newItems) {控制台日志(新项目)；}&this.$refs['prospectsTable'].filteredItems: function(newItems) {控制台日志(新项目)；}

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

var p = new Vue({el: '#prospectsApp',数据:() =>({}),手表:功能(){//如何访问 watch 函数内的 $refs 数组?$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="海拔-1" ><模板 v-slot:headers="props"><tr><th><v-checkbox :input-value="props.all" color="#c79121" :indeterminate="props.indeterminate" 主要隐藏细节@click.stop="toggleAllSelected"></v-checkbox></th><th v-for="props.headers 中的header" :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>@{{ 标题文本 }}</th></tr><模板 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" 主要隐藏细节颜色="#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>已联系！

</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>标记为已联系</button><button class="btn btn-primary btn-sm" @click="editProspect(props.item.id)"><span class="fa fa-edit"></span>编辑线索<button class="btn btn-danger btn-sm" @click="removeProspect(props.item.id)"><span class="fa fa-trash"></span>删除潜在客户</td></tr><模板槽=无数据"><p class="text-xs-center">无数据</p></v-data-table></v-app>

解决方案

它可能位于 $root 中，因为它声明的组件在哪里.

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

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

观看:{'$refs.prospectsTable.filteredItems':函数(值){控制台日志(值)；}}

I am building a Vue JS SPA, and have a Vuetify data-table inside of the v-app. I am trying to set a variable inside the watch object for the filteredItems computed property inside the data-table but I am unsure of how to access the $refs array inside the instance.

I know that the data is accessible within the instance by using:

this.$refs['prospectsTable'].filteredItems

However the same reference name does not work within the watch object. I have tried:

$refs['prospectsTable'].filteredItems: function(newItems) {
            console.log(newItems);
        }

&

this.$refs['prospectsTable'].filteredItems: function(newItems) {
            console.log(newItems);
        }

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

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>

解决方案

It might be sat in $root because of where the component it is declared.

If $refs.prospectsTable is not working then try $root.$refs.prospectsTable.

Perhaps also this should be keys in a watcher as a string as so:

watch: {

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


}

这篇关于访问 Vue JS 实例监视对象内的 $refs 数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！