vue3.0のセットアップで定義された変数は、バックグラウンドに到達した後に変数の値を取得します

序文:

       vue3.0では、セットアップで変数を定義し、returnで送信できます。ページは{ {}}で直接取得されますが、データを取得するためにバックグラウンドを要求した後、初期化によって定義されたフィールドを変更する必要があります。この場合はどうすればよいでしょうか

目次

1.ソースコードを共有し、

テンプレート:

js:

2.オンラインで関連情報を探す

2つの方法があります。1つはrefメソッドで、もう1つはリアクティブメソッドです。これら2つのことは、私が個人的に奇妙に感じます。1つは、オブジェクトに置き換えられ、複数のレイヤーがある場合、彼の.valueメソッドはあまり良くないということです。フレンドリーで、最初のrefメソッドは、データリンケージに使用すると、不適切と感じます


1.ソースコードを共有し、

テンプレート:

<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.オンラインで関連情報を探す

2つの方法があります。1つはrefメソッドで、もう1つはリアクティブメソッドです。これら2つのことは、私が個人的に奇妙に感じます。1つは、オブジェクトに置き換えられ、複数のレイヤーがある場合、彼の.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,
        }
    },

 

おすすめ

転載: blog.csdn.net/qq_41619796/article/details/114371437