vue3.2 component使用了computed出现警告Write operation failed: computed value is readonly

在进行公司项目的重构过程中,作者遇到了关于Vue.js动态组件的一个问题,具体表现为使用`<component>`标签时,浏览器报出警告。问题源于`formComponent`的计算属性设置不当。经过排查,作者发现需要将`route.params.type`转换为字符串并直接赋值给`formComponent`的引用。修复后的代码成功消除了警告,问题得到解决。
摘要由CSDN通过智能技术生成

将公司的项目重构时,踩了个动态组件的坑,特地记录一下

<template>
	<component
        ref="formComponent"
        :is="formComponent"
    />
</template>

<script setup lang='ts'>
	const mapComp: any = {
	  Record
	};
	const formComponent = computed(() => {
	  return mapComp[route.params.type as keyof typeof mapComp];
	});
</script>

然后浏览器报出两个警告
在这里插入图片描述

开始的时候还没有意识到是component的computed问题,一直在syncOperateButton这个函数里面找问题,最后误打误撞看到 官网例子 才反应过来是component的computed问题

修改后:

<template>
	<component
        ref="formComponent"
		:is="mapComp[route.params.type as string]"
    />
</template>

<script setup lang='ts'>
	import {useRoute} from 'vue-router'
	const route = useRoute()
	
	const mapComp: any = {
	  Record
	};
	const formComponent = ref<string>(route.params.type as string);
</script>

至此问题就解决了

官方例子:https://sfc.vuejs.org/#eNqNVNFu2yAU/RXkPqSVYrtdpz2wpFrf9riHvdXTRDBOaG1AgNNWUf59B3BcZ13WxFLEvfdwOOfa3F12b0yx7UVGs4XjVhpPnPC9uauU7Iy2nnzXnSCN1R2ZFWUIAnw2ln9o591Yj9Ex4N7yjdy+UQzxMWhHrGjIfgClEqkU18p5wntrhfI/2YosA+5yFmTMrip1QHi2cqjtsCnqnYdF1BJXw5GV2ldqUSabMIjAi860zAtEhCxquSW8Zc4tq6wWna6ymEdl1XuvsSEE+G3zRluALn/Pw9lXRKqoocpGCH0Sr0AgO00e2B9mKOSJdTaHfcY9FNIjr8tlICX7XxOGb7yV/AkMR02ZnjJIJmS3S9thOnoo03HBuEfINVqvQEGoDJKC/oc3Vhw69iLS3y3KcUtqV4l+YbUoJ11E6PxrG5ZFaGF6J41WPm9YJ9tXShxTLnfCyuZrqK20rYWl5Ma8EKdbWZMLIcSklFtWy95R8sm8xLRhdS3VGolr7LnFX0x3zK6lyr02IBPdNLfScN5R8vmA7XE+NLSCe0oUPMWs3grbtPo5f6GE9V4jiebBydvLSn5GBV8g4OZAOsiFgLwVjR91376vW7nenAIctYJzHkt4MU6jZLRUXtgEZ/xpbXWvakoumuvw/Mt0DrppPp49pmFwYo9uQg+SySN6cR2ed/gifbdnbBggpx2OPR36me5q/JayeZbmRN4xUzw6rTCuIl81FHDzaDoh5DA/QlxlG++No2XpGh7mzaMrtF2XWBW2V15ilgnX5Surn/E9gLjK4rwYOEok0Y0cNwKihf0f51/Qd7yBFo72sHKYoWHknp4/6c4lNXEEj5fvxN0D8zh9z6dO4/sM7snYPp/9MPs/5N//ARljNdU=

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值