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 函数  
  };  
};

结果展示:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python·turtle库编程之:怎么画一个五角星?

文章目录 前言源码附: 前言 大家好,我是BoBo仔,这节课我要带来一期turtle库的使用教程——画五角星。话不多说,我们直接上代码。 源码 import turtle as t t.pencolor(yellow) t.fillcolor("yellow") t.penup() t.go…

算法刷题:和为s的两个数

和为s的两个数 .题目链接题目详情算法原理我的答案 . 题目链接 和为s的两个数 题目详情 算法原理 这里我们是利用单调性来使用双指针的对撞指针来解决问题 因为数组给的是有序递增的,因此我们设置两个指针left和right来解决问题,当nums[left]与nums[right]相加会有三种情况:…

电脑监控屏幕软件有哪些(监控电脑屏幕的软件)

随着信息技术的迅猛发展,电脑屏幕监控软件已成为企业、家庭以及教育机构保护数据安全、提升工作效率以及进行行为分析的重要工具。本文将详细介绍几款主流的电脑屏幕监控软件,包括它们的功能、特点以及适用场景,帮助读者更好地了解并选择合适…

【AIGC】Stable Diffusion之模型微调工具

推荐一款好用的模型微调工具,cybertron furnace 是一个lora训练整合包,提供训练 lora 模型的工具集或环境。集成环境包括必要的依赖项和配置文件、预训练脚本,支持人物、二次元、画风、自定义lora的训练,以简化用户训练 lora 模型…

React - 分页插件默认是英文怎么办

英文组件的通用解决方案 这里以分页插件为例: 大家可以看到,最后的这个页面跳转提示文字为Go to,不是中文,而官网里面的案例则是: 解决方案: import { ConfigProvider } from antd; import zhCN from an…

基于JAVA,SpringBoot和Vue二手房屋销售系统设计

摘要: 本研究旨在设计并实现一个基于JAVA, SpringBoot和Vue技术的二手房屋销售系统。该系统采用当前流行的前后端分离架构,后端使用SpringBoot框架快速搭建RESTful API,提供稳定且高效的服务端应用;前端则通过Vue.js框架构建动态…

幻兽帕鲁在腾讯云服务器中怎么修改配置?游戏难度、经验倍率等等

幻兽帕鲁的游戏配置文件应该是PalWorldSettings 找到这个文件,就可以修改里面的参数。 如果你是用腾讯云一键部署的幻兽帕鲁,则可以到轻量应用服务器管理界面,找到“应用管理”,里面有个可视化修改游戏参数的面板设置&#xff0…

计网物理层

通信基础 基本概念 物理层解决如何在连接各种计算机的传输媒体上传输数据比特流,而不是指具体的传输媒体。 其主要任务是确定与传输媒体接口有关的一些特性,即定义标准。 机械特性:定义物理连接的特性,规定物理连接时所采用的…

UI文件原理

使用UI文件创建界面很轻松很便捷,他的原理就是每次我们保存UI文件的时候,QtCreator就自动帮我们将UI文件翻译成C的图形界面创建代码。可以通过以下步骤查看代码 到工程编译目录,一般就是工程同级目录下会生成另一个编译目录,会找到…

Cohere For AI 推出了 Aya,这是一款覆盖超过 100 种语言的大型语言模型(LLM)

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

安卓自定义画板

包含功能: 包含 获取当前画板的截图、设置画笔样式、获取画笔样式、设置画笔宽度、获取画笔宽度、设置画笔颜色、获取画笔颜色、加载图片、获取图片位图对象、设置图片位图对象,并在画布上绘制图片、撤销上一步操作、重做上一步撤销的操作、清空所有绘图…

VScode中配置 C/C++ 环境 | IT拯救者

文章目录 0 引言1. 下载编辑器VScode2. 下载编译器MinGW并解压3. 将MinGW添加至环境变量4. 配置VScode插件5. 运行代码6. 调整和优化7. 提示8. 例行格式条款9. 例行格式条款 0 引言 由于VScode毛毛张使用不习惯,因此配置教程记不住,不过毛毛张看到一篇不…

论文阅读-PIM-tree:一种面向内存处理的抗偏移索引

论文名称:PIM-tree: A Skew-resistant Index for Processing-in-Memory 摘要 当今的内存索引性能受到内存延迟/带宽瓶颈的限制。Processing-in-memory (PIM) 是一种新兴的方法,可能通过实现低延迟内存访问,其聚合内存带宽随 PIM 节点数量扩…

力扣1732. 找到最高海拔(前缀和)

Problem: 1732. 找到最高海拔 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.求取数组gain的大小 n n n; 2.定义一个大小为 n 1 n 1 n1的数组preSum; 3.先求取前 n n n个元素的前缀和,再最后单独处理preSum[n];其中preSum[n] preSum[n - 1] gai…

Leetcode-54. 螺旋矩阵

给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4,5]示例 2: 输入:matrix [[1,2,3,…

LeetCode 每日一题 Day 62 - 75

1686. 石子游戏 VI Alice 和 Bob 轮流玩一个游戏,Alice 先手。 一堆石子里总共有 n 个石子,轮到某个玩家时,他可以 移出 一个石子并得到这个石子的价值。Alice 和 Bob 对石子价值有 不一样的的评判标准 。双方都知道对方的评判标准。 给你…

【论文精读】CLIP

摘要 以往基于自然语言监督的图像表示学习方法如ConVIRT,只在一二十万张图像的小规模数据集上训练,限制了该方法能发挥的性能。故本文研究了在大规模自然语言监督下训练的图像分类器的性能,具体有: 借助互联网上大量公开可用数据…

【Android】使用Apktool反编译Apk文件

文章目录 1. 下载Apktool1.1 Apktool官网下载1.2 百度网盘下载 2. 安装Apktool3. 使用Apktool3.1 配置Java环境3.2 准备Apk文件3.3 反编译Apk文件3.3.1 解包Apk文件3.3.2 修改Apk文件3.3.3 打包Apk文件3.3.4 签名Apk文件 1. 下载Apktool 要使用Apktool,需要准备好 …

如何手机搜学法减分答案? #媒体#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式,可以快速查找问题解析,加深对题目答案的理解。 1.证件照全能管家(APP) 一个非常好用的证件照APP 常用的证件照尺寸和底色都有、日常的证件照编辑完全够用&#…

【PyQt6】QScreen 屏幕截屏

文章目录 0 环境1 简介2 QScreen 类2.1 获取 QScreen 的对象2.2 QScreen 的常见信息 3. 示例代码 0 环境 - Python 3.12.1 - PyQt6 6.6.1 pip install PyQt6 PyQt6-Qt6 6.6.1 默认安装PyQt6-sip 13.6.…