问题描述
我正在构建一个 Vue JS SPA,并且在v-app内有一个 Vuetify数据表。我正在尝试在数据表内的 filteredItems计算属性的 watch对象内设置一个变量,但是我不确定如何访问 $ refs数组在实例内部。
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
但是,相同的引用名称在watch对象中不起作用。我尝试过:
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);
}
如何在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>
推荐答案
它可能位于$ root中,因为
It might be sat in $root because of where the component it is declared.
如果 $ refs.prospectsTable
不起作用,请尝试 $ root。$ refs.prospectsTable
。
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数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!