Write operation failed: computed value is readonly问题解决

源代码:

// 封装倒计时逻辑函数
import { computed, ref } from 'vue'
import dayjs from 'dayjs'
export const useCountDown = () => {// 1.响应式数据const time = ref(0)// 格式化时间const formatTime = computed(()=>dayjs.unix(time.value).format('mm分ss秒'))// 2.开始倒计时的函数const start = (currentTime) => {// 倒计时逻辑formatTime.value = currentTime setInterval(() => {formatTime.value--}, 1000);}return {formatTime,start}
}

解析:

上述代码中的错误 Write operation failed: computed value is readonly 是因为尝试直接修改一个 computed 属性的值。在 Vue 3 中,computed 属性是只读的,不能直接给它赋值。修复这个问题,需要通过修改底层响应式数据来影响 computed 属性的值。在useCountDown 钩子中,直接修改 time 引用的值,而不是尝试修改 formatTimeformatTime 会根据 time 的变化自动更新。

更改后代码:

将上述代码中待修改的formatTime该为time即可,用time改变,formatTIme承接数据

import { ref, computed, onUnmounted } from 'vue';  
import dayjs from 'dayjs';  export const useCountDown = () => {  // 1. 响应式数据  const time = ref(0); // 倒计时秒数  // 2. 计算属性,用于格式化时间  const formatTime = computed(() => dayjs.unix(time.value).format('mm:ss'));  // 3. 开始倒计时的函数  const start = (totalSeconds) => {  time.value = totalSeconds; // 设置初始倒计时时间  const intervalId = setInterval(() => {  if (time.value > 0) {  time.value--; // 每秒减少1  } else {  clearInterval(intervalId); // 时间到,清除定时器  }  }, 1000);  // 组件卸载时清除定时器  onUnmounted(() => {  clearInterval(intervalId);  });  };  // 4. 重置倒计时的函数  const reset = (totalSeconds) => {  time.value = totalSeconds; // 重置倒计时时间  };  return {  formatTime,  start,  reset // 可以选择性地暴露 reset 函数  };  
};

结果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/471429.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QPaint绘制自定义坐标轴组件00

最终效果 1.创建一个ui页面,修改背景颜色 鼠标右键->改变样式表->添加颜色->background-color->选择合适的颜色->ok->Apply->ok 重新运行就可以看到widget的背景颜色已经改好 2.创建一个自定义的widget窗口小部件类,class MyChart : public QWidget m…

Python算法题集_二叉树的层序遍历

Python算法题集_二叉树的层序遍历 题102:二叉树的层序遍历1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【DFS递归】2) 改进版一【BFS迭代】3) 改进版二【BFS迭代循环】 4. 最优算法 本文为Python算法题集之一的代码示例 题102&am…

我的NPI项目之嵌入式总线系列(一) -- SPI 总线

SPI总线很有意思, 如我的NPI项目之Android 安全系列 -- 外挂SE集成(SPI)接口-CSDN博客 提到SPI的接口,基本的电气特性已经给出。这边文章就针对协议部分进行详细解析。从协议网找到了原文:SPI protocol 还有wilipedi…

(五)【Jmeter】使用代理录制HTTP脚本操作步骤及注意事项

前置信息 软件版本Jmeter5.6.3服务网址备注drupalhttp://192.168.88.88:18080/(二)【Jmeter】专栏实战项目靶场drupal部署 用户名密码test1test1test2test2实操记录 1、启动jmeter,操作顺序见下图 2、在视图面板添加如下信息,点击开始

请标记你的龙年心愿关键词

昨天外孙陪我游了崇州市白头镇、道民镇(竹艺村),见我心情愉悦,今天再陪我去饱览其他风景名胜,所以笔者——本“人民体验官”特别推广人民日报官方微博文化产品《2024年第一批春花开了》《#大年初七#,标记你…

【Linux取经路】文件系统之被打开的文件——文件描述符的引入

文章目录 一、明确基本共识二、C语言文件接口回顾2.1 文件的打开操作2.2 文件的读取写入操作2.3 三个标准输入输出流 三、文件有关的系统调用3.1 open3.1.1 比特位级别的标志位传递方式 3.2 write3.2.1 模拟实现 w 选项3.2.2 模拟实现 a 选项 3.3 read 四、访问文件的本质4.1 再…

ArduPilot开源飞控之硬件SBC分析

ArduPilot开源飞控之硬件SBC分析 1. 源由2. Companion Computer2.1 APSync【不推荐,无更新】2.2 DroneKit【不推荐,无更新/SDK】2.3 FlytOS【不推荐,闭源】2.4 Maverick【不推荐,闭源】2.5 ROS【专门讨论,开源/复杂】2…

保育员线上考试答案查找?分享8个有手机就能搜题的工具 #经验分享#其他

市面上搜题软件不少,大部分都挺好用的,今天小编在这里给大家分享几个好用的搜题工具,都拥有丰富的题库资源;而且搜题功能也都很完善,手机端、网页端均有,有需要的小伙伴赶紧码住! 1.题老大 这…

Rust 数据结构与算法:4栈:用栈实现进制转换

2、进展转换 将十进制数转换为二进制表示形式的最简单方法是“除二法”&#xff0c;可用栈来跟踪二进制结果。 除二法 下面实现一个将十进制数转换为二进制或十六进制的算法&#xff0c;代码如下&#xff1a; #[derive(Debug)] struct Stack<T> {size: usize, // 栈大…

MySQL安装问题:由于找不到MSVCP120.dll,无法继续执行代码.重新安装程序可能会解决此问题。

出现的问题&#xff1a; 解决&#xff1a;由于没有安装微软常用运行库合集64位导致的问题 下载vcredist_x64 https://www.microsoft.com/zh-CN/download/details.aspx?id40784 下载完成后&#xff0c;点击运行解决问题。

【知识图谱--第四讲知识图谱的抽取与构建】

知识图谱的抽取与构建 实体识别与分类关系抽取与属性补全概念抽取事件识别与抽取 实体识别与分类 关系抽取与属性补全 概念抽取 事件识别与抽取

【开源】SpringBoot框架开发农家乐订餐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户2.2 管理员 三、系统展示四、核心代码4.1 查询菜品类型4.2 查询菜品4.3 加购菜品4.4 新增菜品收藏4.5 新增菜品留言 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的农家乐订餐系统&#xff0c…