vue3 ref，reactive请求后的赋值问题以及解决方法

开发的过程中，我们一定会进行接口的对接，将响应的结果赋值给我们页面上需要展示或者操作的变量，在vue3中，我们可能会稍微的有点不适应，在赋值的过程中，使用了错误的做法，导致一直失败

错误代码演示

<template><ul><li v-for="(p,index) in images2" :key="index">{{p.pic}}</li><li v-for="(p,index) in images" :key="index">{{p.pic}}</li></ul>
</template>
<script>
import {onMounted,reactive,ref} from 'vue'
import {postBanner} from '@/api/index'export default {setup() {let  images = ref([])let images2 = reactive([])onMounted(async()=>{getSwipeAPI()})function getSwipeAPI(){postBanner(1).then((res)=>{images.value = resimages2 = res})}console.log(images2);console.log(images);return { images,images2 };},
}
</script>

最开始的想法是通过赋值然后拿到数据，渲染到页面上，但是ref可以拿到数据，reactive拿不到数据

然后我看了一下我的数据，是个对象类型的数据

我们知道ref在存储对象类型的数据还是求助了reactive函数

解决办法

1、push

        let images2 = reactive([])postBanner(1).then((res)=>{images2.push(res)})

2、对象赋值

        let images2 = reactive({list: []})postBanner(1).then((res)=>{images2.list = res})

这样就可以拿到值了

vue3 ref，reactive请求后的赋值问题以及解决方法相关推荐

19.0 vue3 ref，reactive请求后的赋值问题以及解决方法
上一篇: 18.0 vue3 Vue Router的使用(1)_十一月的萧邦-CSDN博客开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我 ...
服务器启动成功网页无法访问,apache启动后无法访问网页的解决方法
apache启动后无法访问网页的解决方法发布时间:2021-01-27 11:31:08 来源:亿速云阅读:146 作者:小新小编给大家分享一下apache启动后无法访问网页的解决方法,希望大家 ...
hp打印机无法与计算机,电脑中安装HP打印机后重启无法打印的解决方法
电脑中安装HP打印机后重启无法打印怎么办?近来不少朋友都向小编咨询了这个问题.HP有一个型号重启以后无法打印,今天系统城小编就要在这里给大家介绍一个方法可以解决这个问题. 具体方法如下: 1.这是第一 ...
@Data注解使用后get set报错解决方法
@Data注解使用后get set报错解决方法参考文章: (1)@Data注解使用后get set报错解决方法 (2)https://www.cnblogs.com/lijinshan950823/ ...
宝塔控制面板创建ftp后链接不上的解决方法
宝塔控制面板创建ftp后链接不上的解决方法参考文章: (1)宝塔控制面板创建ftp后链接不上的解决方法 (2)https://www.cnblogs.com/cncom/p/10772078.htm ...
SQLServer 数据库变成单个用户后无法访问问题的解决方法
SQLServer 数据库变成单个用户后无法访问问题的解决方法参考文章: (1)SQLServer 数据库变成单个用户后无法访问问题的解决方法 (2)https://www.cnblogs.com/ ...
$.ajax返回的JSON格式的数据后无法执行success的解决方法
$.ajax返回的JSON格式的数据后无法执行success的解决方法参考文章: (1)$.ajax返回的JSON格式的数据后无法执行success的解决方法 (2)https://www.cnbl ...
http-server swagger-editor启动成功后，访问404的解决方法
http-server swagger-editor启动成功后,访问404的解决方法参考文章: (1)http-server swagger-editor启动成功后,访问404的解决方法 (2)ht ...
重启计算机设的桌面背景就没了,桌面壁纸无法保存怎么办？Win7系统重启后不保存桌面背景解决方法...
今天一网友咨询小编称自己设置了电脑桌面背景图片,但是电脑重启后不保存桌面背景,又还原至之前的桌面背景,遇到桌面壁纸无法保存怎么办?针对这个问题,装机之家小编分享一下Win7系统重启后不保存桌面背景解决 ...

vue3 ref，reactive请求后的赋值问题以及解决方法

vue3 ref，reactive请求后的赋值问题以及解决方法

vue3 ref，reactive请求后的赋值问题以及解决方法相关推荐

最新文章

热门文章