前言:

       vue3.0中我们setup是可以定义一个变量,然后return发送出来,页面用{{}}直接获取,但是我们请求后台获取数据以后是需要改我们初始化定义的字段的,这种情况下应该怎么做呢,这里分享下我的经验

目录

1、分享源码,

template:

js中:

2、查找网上相关资料

这里是两种,一种是ref的方法,一种是reactive  ,这两种我个人感觉怪的地方,一个是如果换成对象,并且是好几层的话,他的 .value方法不是很友好,而且第一种的ref方法,如果被用来做数据联动,感觉不太合适


1、分享源码,

template:

<ul>
    <li>我是从后台拿到的值:</li>
    <li>城市:{{pageData.list.cityName}}</li>
    <li>学校:{{pageData.list.schoolName}}</li>
    <li>姓名:{{pageData.list.teacherName}}</li>
  </ul>

js中:

setup (props, ctx) {
    //页面上的数据
    let pageData = reactive({
      list:{}
    })



    //请求后台
    let params = {
    }

    proxy.$api.user.getUerInfo(params).then(res=> {
      let code = trimNumber(res.data.code)
      if (code === 200) {
        let datas = res.data.data
        pageData.list = datas
      }
    })


    return {
      //数据
      pageData

    }

2、查找网上相关资料

这里是两种,一种是ref的方法,一种是reactive  ,这两种我个人感觉怪的地方,一个是如果换成对象,并且是好几层的话,他的 .value方法不是很友好,而且第一种的ref方法,如果被用来做数据联动,感觉不太合适

 setup() {
        const aLoading = ref<boolean>(false)
        let apps = reactive<Array<any>>([])
        const getAllApp = () => {
            aLoading.value = true
            queryAll()
                .then((response: any) => {
                    if (response.content.length > 0) {
                        apps = response.content
                    }
                    console.log(apps) // Array(2) // 值是拿到了的
                }).catch(error => {
                    console.debug(error)
                }).finally(() => {
                    aLoading.value = false
                })
        }
        onMounted(() => {
            getAllApp()
        })

        return {
            aLoading,
            apps,
        }
    },

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐