使用扩展运算符的Vue3反应对象更新

我最近开始看 Vue 组合 API,我一定错过了一些东西,因为我发现这个“新”的方法是一个真正的 PITA!

我最近开始看 Vue 组合 API,我一定错过了一些东西,因为我发现这个“新”的方法是一个真正的 PITA!

以前,我可以使用一个简单的扩展运算符来更新我的表单数据,在 created()钩子中调用 REST API。我试图在组合 API 中转置这个,但我有点卡住了语法变化(我知道扩展运算符“杀死”反应性)。

我能够使用 setup(){} 方法使其工作(顺便说一句,这是我的原始页面的过度简化但工作示例):

<script>
import { reactive, toRefs } from 'vue'
export default {
    setup() {
        let profil = reactive({
            memberNo: '',
            details: {
                firstname: '',
                lastname: '',
                date: '',
                address: {
                    city: '',
                    street: '',
                    postalCode: ''
                }
            }
        })
        return {
            ...toRefs(profil)
        }
    },
    created() {
       // Call some API
        let dataFromApi = {
            memberNo: '1234',
            details: {
                firstname: 'Micheal',
                lastname: 'Jordan',
                date: '1967-01-21',
                address: {
                    city: 'Quebec',
                    street: 'No street',
                    postalCode: 'H0H 0H0'
                }
            }
        }
        this.profil = { ...this.profil, ...dataFromApi }
    }
}
</script>
<template>
    <p>
        {{ profil.memberNo }}
        {{ profil.details.firstname }}
    </p>
</template>

所以使用 toRefs()方法它工作。但是如果我想用<script setup>标签全部进去,我找不到一种方法来使这个工作?!?

这 code 不与传播的工作,但“确定”与个人分配(备注)

<script setup>
import { reactive, onBeforeMount, toRefs } from 'vue'
let profil = reactive({
    memberNo: '',
    details: {
        firstname: '',
        lastname: '',
        date: '',
        address: {
            city: '',
            street: '',
            postalCode: ''
        }
    }
})
onBeforeMount(() => {
  // Call some API
    let dataFromApi = reactive({
        memberNo: '1234',
        details: {
            firstname: 'Micheal',
            lastname: 'Jordan',
            date: '1967-01-21',
            address: {
                city: 'Quebec',
                street: 'No street',
                postalCode: 'H0H 0H0'
            }
        }
    })
  // Don't work
    profil = { ...toRefs(profil), ...toRefs(dataFromApi) }
  // ... but this work
    // profil.memberNo = dataFromApi.memberNo
    // profil.details.firstname = dataFromApi.details.firstname
})
</script>

请给我我的信仰与组合 API,否则我会坚持这个项目的其余部分的选项!:-)

0
profil = { ...toRefs(profil), ...toRefs(dataFromApi) }

这不能工作,因为你正在使用 {} 语法创建一个文字非反应对象。

我认为你可以使用 Object.assign(profil,dataFromApi),因为引用 profil 将被保留,因此它将保持反应性。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(394)
雅虎板球API抛出错误'没有发现表cricket.scorecard.live的定义' 任何方式来解决它
上一篇
GoogleChrome更新-从Inspector CSS复制代码的问题
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(29条)