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

news2024/11/30 8:57:12

源代码:

// 封装倒计时逻辑函数
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.coloradmin.cn/o/1449847.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

表的连接

目录 内连接实现效果 使用左外连接,将所有的员工信息都显示出来,即便他没有对应的部门 使用右外连接,将所有的部门信息都显示出来 查询每个员工的编号、姓名、职位,以及所在各部门的领导姓名、领导职位 确定所需要的数据表 确…

了解Ping、Wget、端口、Netstat和Curl命令

1. 端口 1.1 什么是端口? 端口是一种用于标识不同应用程序或服务的逻辑通道。它是一个数字,取值范围从0到65535。常见的端口有一些已经被标准化,比如HTTP使用的80端口,HTTPS使用的443端口。 1.2 了解端口状态 使用netstat -an…

springboot191教师工作量管理系统

简介 【 毕设 源码 推荐 javaweb 项目】 基于 springbootvue 的教师工作量管理系统(springboot191) 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后…

深度学习的新进展:探索人工智能的未来

文章目录 📑引言深度学习技术概述计算机视觉领域的深度应用自然语言处理的深度革命跨领域应用的深度拓展深度学习的挑战与未来展望结语 📑引言 在科技日新月异的今天,深度学习作为人工智能领域的一颗璀璨明珠,正在引领着技术创新…

计算机服务器中了360后缀勒索病毒怎么办?360后缀勒索病毒处理流程

网络技术的不断应用与发展,为企业的生产运营提供了有利保障,越来越多的企业走向数字化办公模式,并且企业的发展离不开数据支撑,重视数据安全成为了众多企业关心的主要话题。春节前后,云天数据恢复中心接到很多企业的求…

数据卷的常见命令,如何创建Nginx容器,修改nginx容器内的html目录下的index.html文件

数据卷 什么是数据卷 数据卷(volume)是一个虚拟目录,是容器内目录与宿主机**目录**之间映射的桥梁。 以Nginx为例,我们知道Nginx中有两个关键的目录: html:放置一些静态资源 conf:放置配置文…

【51单片机】直流电机驱动(PWM)(江科大)

1.直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极,当电极正接时,电机正转,当电极反接时,电机反转 直流电机主要由永磁体(定子)、线圈(转子)和换向器组成 除直流电机外,常见的电机还有步进电机、舵机、无刷电机、空心杯电机等 2.电机驱动…

奔跑吧小恐龙(Java)

前言 Google浏览器内含了一个小彩蛋当没有网络连接时,浏览器会弹出一个小恐龙,当我们点击它时游戏就会开始进行,大家也可以玩一下试试,网址:恐龙快跑 - 霸王龙游戏. (ur1.fun) 今天我们也可以用Java来简单的实现一下这…

判断一个时间序列中的元素是否属于一个月的第一天或最后一天

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 判断一个时间序列中的元素 是否属于一个月的第一天或最后一天 Series.dt.is_month_start Series.dt.is_month_end [太阳]选择题 以下代码的输出结果中正确的是? import pandas as pd ts pd.S…

书生浦语大模型实战营-课程作业(3)

下载sentence_transformer的代码运行情况。sentence_transformer用于embedding(转向量) 本地构建持久化向量数据库。就是把txt和md文件抽取出纯文本,分割成定长(500)后转换成向量,保存到本地,称…

抽象的前端

问题背景:vue3,axios 直接导致问题:路由渲染失败 问题报错:Uncaught SyntaxError: The requested module /node_modules/.vite/deps/axios.js?v7bee3286 does not provide an export named post (at LoginIn.vue:16:9) 引入组…

Ps:创建联系表

Ps菜单:文件/自动/联系表 II Automate/Contact sheet II Photoshop 的“联系表 II” Contact Sheet II命令为快速生成图像集合的预览和打印目录提供了一种高效的方法。 此命令可以通过自动化过程读取指定的图像文件,然后根据用户定义的参数(如…

【Cocos入门】物理系统(物理碰撞)

物理碰撞 物理引擎默认是关闭状态以节省资源开销。开启方法和之前的普通碰撞类似:cc.director.getPhysicsManager().enabled true但有一个区别,物理引擎的开启必须放在onLoad函数内运行,否则不生效。 物理碰撞组件也同样具有碰撞回调函数。…

第13章 网络 Page735~736 “I/O对象”的链式传递 计数器继承enable_shared_from_this<DownCounter>

使用enable_shared_from_this基类和该基类带来的shared_from_this()方法。DownCounter被加上基类enable_shared_from_this<T> 代码如下&#xff1a; 代码先通过shared_from_this()方法安全正确地复制智能指针counter&#xff0c;再通过lambda表达式以“捕获”的方式实现…

骑士遍历初级版

时间限制&#xff1a;1秒 内存限制&#xff1a;128M 题目描述 如图&#xff0c;从左下角A点出发&#xff0c;马只能向右走&#xff0c;根据马走日字的规则&#xff0c;究竟如何走才能到达右上角B点 输入描述 两个整数x、y&#xff0c;代表右上角B点的坐标&#xff0c…

具有集中目录服务器的 P2P 工作方式

P2P 工作方式概述 在 P2P 工作方式下&#xff0c;所有的音频/视频文件都是在普通的互联网用户之间传输。 具有集中目录服务器的 P2P 工作方式 Napster 最早使用 P2P 技术&#xff0c;提供免费下载 MP3 音乐。 Napster 将所有音乐文件的索引信息都集中存放在 Napster 目录服务…

单片机学习笔记---DS18B20温度读取

目录 OneWire.c 模拟初始化的时序 模拟发送一位的时序 模拟接收一位的时序 模拟发送一个字节的时序 模拟接收一个字节的时序 OneWire.h DS18B20.c DS18B20数据帧 模拟温度变换的数据帧 模拟温度读取的数据帧 DS18B20.h main.c 上一篇讲了DS18B20温度传感器的工作原…

[GYCTF2020]Blacklist

感觉是[强网杯 2019]随便注 的加强版&#xff0c;之前做的是最后可以通过prepare和execute实现对select的绕过&#xff0c;但是这题把这两个关键字也过滤了。 前面堆叠注入没啥问题&#xff0c;卡在了最后读取flag 查看其他师傅的wp&#xff0c;发现这个handler的可以当作丐版s…

CSGO搬砖项目怎么样?分享一下个人的看法!

对于steam搬砖平台&#xff0c;无人不知&#xff0c;无人不晓啊&#xff0c;全球最大的一个游戏平台&#xff0c;像我们知道的PUBG&#xff0c;CS:GO&#xff0c;都是里面的&#xff0c;比较火的一个平台。 对于想了解Steam搬砖的&#xff0c;今天分享一下个人的看法。 首先&a…

Linux操作系统基础(十四):集群服务器搭建

文章目录 集群服务器搭建 一、新增Linux服务器 1、克隆虚拟机 2、修改虚拟机的硬件配置 3、修改虚拟机的网络配置 二、关闭防火墙 1、关闭firewalld 2、关闭SElinux 三、修改主机名 四、修改hosts映射 五、SSH免密登录 六、时钟同步 七、远程文件拷贝 1、从本机拷…