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

将公司的项目重构时，踩了个动态组件的坑，特地记录一下然后浏览器报出两个警告开始的时候还没有意识到是component的computed问题，一直在这个函数里面找问题，最后误打误撞看到官网例子才反应过来是component的computed问题修改后：至此问题就解决了......

JacKie-Shao

5108人浏览 · 2022-07-08 11:02:18

JacKie-Shao · 2022-07-08 11:02:18 发布

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

<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=