如何解决在选项查询解决之前初始化vue v-select
我正在用vue和firebase构建SPA,其中一个视图是数据表,并在下拉列表中对数据进行过滤。
数据加载速度很慢,所以我想要的是让v-select在返回所有过滤器选项的查询解析之前用默认值(它是过滤器ID和名称)填充。 / p>
我尝试了几种方法,但是我不明白为什么这种方法不起作用。 正确的方法是什么?
注意:过滤器值必须具有名称和ID,这一点很重要,因为ID驱动了数据过滤的逻辑
<template>
<v-select
:items="items"
v-model="currentItem"
item-value="id"
item-text="name"
label="MySelector">
</v-select>
[...]
<v-data-table> The data table elements are filtered using the value of v-select.</v-data-table>
</template>
<script>
export default {
props: {
currentItem:{
Array,default: () => {return {id:"rtegergergrg2r",name:"default-name"}
},},computed:{
items() { ... some slow query that returns a [{id:name}] }
}
}
</script>
我也尝试过在items
中返回默认值。它不起作用,并且在页面加载(屏幕截图)时,v-select显示为空。
解决方法
在这种情况下,最好不要在计算属性中运行查询。 我会这样:
export default {
props: {
currentItem: { type: Array,default: () => { id: 'default-id',name: 'default-name' }
},data () {
return {
items: [
{ id: 'default-id',name: 'default-name' }
]
}
},created () {
this.items = // some slow query that returns a value
}
}
这样,您可以确保在过滤器中看到一些默认值。
此外,我有点担心将v-model
与道具一起使用。可能会导致警告有关直接更改道具的警告,这是没有好处的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。