在使用uni-data-select插件时通过接口获取值赋给localdata失败的问题解决方案
更新时间：2024年12月07日 12:11:30 作者：L6X1999
在加载渲染时,调取接口请求的是一个异步的操作,在子组件拿到数据前就渲染了,才导致子组件watch没有监听到值的变化,下面给大家介绍在使用uni-data-select插件时通过接口获取值赋给localdata失败的问题,感兴趣的朋友一起看看吧
首先在这里讲一下失败的原因：
在加载渲染时，调取接口请求的是一个异步的操作，在子组件拿到数据前就渲染了，才导致子组件watch没有监听到值的变化
解决方法：
可以在uni-data-select标签内加入v-if，初始值为false，在调取接口改变数据时将值改为true即可
具体操作如下：
1>html代码
<uni-data-select v-model="value" v-if="show" :localdata="range" @change="change" :clear="false" label="可选地点" ></uni-data-select>
2>js代码
export default {
data() {
return {
value: 0,
range: [],
show:false
}
},
async created() {
//在这里ajax是我自己封装的
const All = await ajax('你自己的接口', 'GET', {})
const myrange = []
All.result.forEach((val, index) => {
myrange.push({ value: index, text: val.roomName })
})
this.range = myrange
this.show= true
}
}到此这篇关于在使用uni-data-select插件时通过接口获取值赋给localdata失败的问题解决的文章就介绍到这了,更多相关uni-data-select插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了自定义vue全局组件use使用、vuex的使用详解，本文主要来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理2017-06-06
这篇文章主要为大家介绍了vue3 hook重构DataV的全屏容器组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了Vue中的插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
这篇文章主要介绍了Vue的七种传值方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
Vue中this.$router和this.$route的区别及push()方法
这篇文章主要给大家介绍了关于Vue中this.$router和this.$route的区别及push()方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
在本篇文章里小编给大家整理的是关于vue按需加载实例的相关知识点内容，有需要的朋友们可以学习参考下。2019-09-09
这篇文章主要介绍了vue项目中使用this.$confirm方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了Javascript中Vuex的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-10-10
使用 Vue 3 的 createApp方法初始化应用的基本步骤
createApp 是 Vue 3 引入的全局 API,用于创建一个应用实例,这篇文章主要介绍了如何使用 Vue 3 的 createApp方法初始化应用,通过 createApp 方法,我们从 Vue 3 的基本初始化开始,扩展到插件的应用、多个应用实例的创建等,需要的朋友可以参考下2024-05-05
最新评论