脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → uni-data-select插件

在使用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插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论