草庐IT

Vue 警告 Write operation failed: computed value is readonly

PKQ1023 2023-04-03 原文

警告信息:

浏览器控制台警告:Write operation failed: computed value is readonly

使用环境:

Vue 3.2.41

Chrome x64 v103.0.5060.66

报错情景:

利用Vue的响应式修改某个值时出现该警告。

<template>
    {{ msg }}
    <br>
    <button @click="add">+</button>
</template>
<script setup lang="ts">
import { computed, ref} from 'vue'

const x = ref('-')

// 计算属性
const msg:any  = computed(()=>{
    return x.value + '-'
})

// 修改 计算属性的值 的方法
const add = () => {
    msg.value = msg.value + '???'
}
</script>

报错原因:

修改的值是计算属性,而计算属性是只读的。所以无法修改。

解决方法:

为计算属性配置修改方法,如下:

<script setup lang="ts">
import { computed, ref} from 'vue'

const msg = ref('-')

// 计算属性
const computedMsg: any = computed({
    get() {
        // 这里返回的值是获取计算属性的值
        return msg.value + '-'
    },
    set(newValue) {
        // 参数newValue是被修改后的值
      
        // 这里是修改的具体逻辑
      	/*
		   注意这里不要使用下面的方法修改计算属性的值来达到修改目的
           而应该直接修改源响应数据xxx的值
		*/
        msg.value = newValue        
        // computedMsg.value = newValue
    }
})

// 修改 计算属性的值 的方法
const add = () => {
    computedMsg.value = computedMsg.value + '???'
}
</script>

参考:

计算属性 | Vue.js

有关Vue 警告 Write operation failed: computed value is readonly的更多相关文章

  1. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

  2. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin,我在Rails3应用程序的应用程序中有一个目录管理,其中包含模型和页面的声明。时不时地我也有一个类,当那个类有一个常量时,就像这样:classFooBAR="bar"end然后,我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗? 最佳答案 在纯Ruby中:classA

  3. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近,当我启动我的Rails服务器时,我收到了一长串警告。虽然它不影响我的应用程序,但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次?当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗?/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  4. ruby-on-rails - 我更新了 ruby​​ gems,现在到处都收到解析树错误和弃用警告! - 2

    简而言之错误:NOTE:Gem::SourceIndex#add_specisdeprecated,useSpecification.add_spec.Itwillberemovedonorafter2011-11-01.Gem::SourceIndex#add_speccalledfrom/opt/local/lib/ruby/site_ruby/1.8/rubygems/source_index.rb:91./opt/local/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/rails/gem_dependency.rb:275:in`==':und

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  6. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  7. ruby - 警告 : PATH set to RVM ruby but GEM_HOME and/or GEM_PATH not set, 请参阅 : https://github. com/wayneeseguin/rvm/issues/3212 - 2

    我每次打开终端时都会收到这个错误:警告:PATH设置为RVMruby​​但未设置GEM_HOME和/或GEM_PATH,请参阅:https://github.com/wayneeseguin/rvm/issues/3212这是在我最近安装zsh(oh-my-zsh)后开始发生的我不知道如何设置GEM_HOME和/或GEM_PATH的路径。 最佳答案 我也面临同样的问题,更改.zshrc中的以下行,exportPATH="/usr/local/heroku/bin:.........."到exportPATH="$PATH:/usr/

  8. ruby - 有没有办法让 2.4.0 中的 Ruby 弃用警告静音? - 2

    从Ruby2.4.0开始,对于使用某些已弃用的功能,会出现弃用警告。例如,Bignum、Fixnum、TRUE和FALSE都会触发弃用警告。当我修复我的代码时,有相当多的代码我希望它保持沉默,尤其是在Rails中。我该怎么做? 最佳答案 moduleKerneldefsuppress_warningsoriginal_verbosity=$VERBOSE$VERBOSE=nilresult=yield$VERBOSE=original_verbosityreturnresultendend>>X=:foo=>:foo>>X=:bar

  9. ruby - 在 Ruby 中,如何在加载 YAML 文档时警告散列中的重复键? - 2

    在下面的Ruby示例中,是否有一种模式可以让YAMLNOT静默忽略重复键“one”?irb(main):001:0>require'yaml'=>trueirb(main):002:0>str='{one:1,one:2}'=>"{one:1,one:2}"irb(main):003:0>YAML.load(str)=>{"one"=>2}谢谢! 最佳答案 使用Psych,您可以遍历AST树以查找重复键。我在我的测试套件中使用以下辅助方法来验证我的i18n翻译中没有重复键:defduplicate_keys(file_or_cont

  10. ruby-on-rails - 如何在 Rails 中启用 Ruby 警告? - 2

    我在test.rb中做了这个:defsome_methodp"Firstdefinition"enddefsome_methodp"Seconddefinition"endsome_method当我调用rubytest.rb时,它打印出Seconddefinition(预期)当我调用ruby-wtest.rb时,它会打印Seconddefinition(预期)并打印警告test。rb:5:警告:方法重新定义;丢弃旧的some_method有没有办法在Rails中启用这些警告?(并将警告打印到控制台/日志文件)为什么我要启用警告:例如,如果我无意中重新定义Controller中的一个方法

随机推荐