草庐IT

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

coinisi_li 2023-04-03 原文

报错：[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading '$refs')"

 背景：1.在做vue项目时，在功能弹框中，想实现新增内容。

             2. 报错原因是要触发menuCheckall组件后，才可以提交，因为不触发menuCheckall的时候dom未加载，没有编译渲染进dom里面。

1.使用了
this.form.menuIds = this.$refs.menuCheckall.$refs.tree.getCheckedKeys();

其中menuCheckall是子组件。

  this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.menuIds = this.$refs.menuCheckall.$refs.tree.getCheckedKeys();
          addOrUpdateRole(this.form).then((res) => {
            console.log(res);
            if (res.code == 0) {
              this.$message.success('提交成功');
              this.dialogShow = false;
              this.$emit('call-back');
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });

2.但是报错了，原因是：
mouted加载数据以后，隐藏的弹出框并没有编译渲染进dom里面。所以click弹出的时候$refs并没有获取到dom元素导致  undefined。

对话是一个虚拟dom,visible!==true之前，dom未挂载在根节点上，导致无法识别。

3.解决办法：

在网上查了一些解决方法，大致有三种：

1）$nextTick dom下一次更新之后

this.$nextTick(()=>{
  this.form.menuIds = this.$refs.menuCheckall.$refs.tree.getCheckedKeys();
})

 这种方法虽然可以提交成功，但是还是会报错。

 2）如果是第一次就点击新增就没必要reset, 根据元素undefined判断

                if (this.$refs.menuCheckall.$refs.tree.getCheckedKeys() !== undefined) {
                    this.form.menuIds =this.$refs.menuCheckall.$refs.tree.getCheckedKeys();
                } 

此种方法仍报错也不可提交，不适用于我的情况。

3）在方法前加了关键字async

这个我没有试

4）最后发现，问题在v-if

改为v-show即可

原因：

v-show作用：当用v-show来隐藏元素时，只会在初次加载时渲染此dom节点，之后都是通用display来控制显隐，如果此时使用v-if，那会频繁的操作dom，会极大的影响性能，但用display则不会

而v-if作用：当用v-if来隐藏元素时，初次加载时就不用渲染此dom节点，提升页面加载速度

 

lsquopropertiesxffxff0cxff0vue.js$javascript$前端

有关[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)的更多相关文章

  1. ruby CSV : How can I read a tab-delimited file? - 2

    CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件，我转到excel，并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗？ 最佳答案 尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|

  2. ruby - File.read ("| echo mystring") 是如何工作的？ - 2

    我在我正在处理的一些代码中发现了这一点。它旨在解决从磁盘读取key文件的要求。在生产环境中，key文件的内容位于环境变量中。旧代码:key=File.read('path/to/key.pem')新代码:key=File.read('|echo$KEY_VARIABLE')这是如何工作的？ 最佳答案 来自IOdocs:Astringstartingwith“|”indicatesasubprocess.Theremainderofthestringfollowingthe“|”isinvokedasaprocesswithappro

  3. ruby - 如何通过 Rubocop 指示打开 & :read as argument to File. - 2

    我有这个代码File.open(file_name,'r'){|file|file.read}但是Rubocop发出警告:Offenses:Style/SymbolProc:Pass&:readasargumenttoopeninsteadofablock.你是怎么做到的？ 最佳答案 我刚刚创建了一个名为“t.txt”的文件，其中包含“Hello,World\n”。我们可以按如下方式阅读。File.open('t.txt','r',&:read)#=>"Hello,World\n"顺便说一下，由于第二个参数的默认值是'r'，所以这样

  4. ruby - Chef : Read variable from file and use it in one converge - 2

    我有以下代码，它下载一个文件，然后将文件的内容读入一个变量。使用该变量，它执行一个命令。这个配方不会收敛，因为/root/foo在编译阶段不存在。我可以通过多个聚合和一个来解决这个问题ifFile.exist但我想用一个收敛来完成它。关于如何做到这一点有什么想法吗？execute'download_joiner'docommand"awss3cps3://bucket/foo/root/foo"not_if{::File.exist?('/root/foo')}endpassword=::File.read('/root/foo').chompexecute'join_domain'd

  5. ruby - TypeError(救援条款所需的类或模块) - 2

    我已经使用Stripe一年多了，基于RyanBates的RailsCast插曲发现here.但是，我的错误处理最近停止工作，而且我以前从未见过此错误。我最近开始在Ruby2.1上运行我的应用程序，据我所知，这就是问题所在。这是我的订阅模型中的一个实例方法:beginsave_with_stripe_paymentrescueStripe::InvalidRequestError=>elogger.error"Stripeerrorwhilecreatingcustomer:#{e.message}"logger.errore.backtrace.join("\n")errors.add

  6. Ruby:read_timeout 和 open_timeout 之间的区别 - 2

    标题本身就说明了......read_timeout和open_timeout之间有什么区别？ 最佳答案 open_timeout是您愿意等待“打开连接”的时间。在TCP上下文中，在放弃尝试并引发超时错误之前等待握手完成的时间量。read_timeout您可能会猜到，是您愿意等待从连接方接收到某些数据的时间。一个例子可能会清楚地说明这一点:在SOAPoverHTTPoverTCP上下文中(简化):您尝试与服务器建立TCP连接。如果建立连接的时间比open_timeout长，则放弃连接尝试并引发/发出/返回超时错误。如果连接成功，您发

  7. ruby - json 没有将 String 隐式转换为 Integer (TypeError) - 2

    玩转ruby​​，我已经:#!/usr/bin/ruby-w#WorldweatheronlineAPIurlformat:http://api.worldweatheronline.com/free/v1/weather.ashx?q={location}&format=json&num_of_days=1&date=today&key={api_key}require'net/http'require'json'@api_key='xxx'@location='city'@url="http://api.worldweatheronline.com/free/v1/weather.

  8. ruby - 如何强制 Rack :session + sinatra to read "rack.session" from params instead of cookies - 2

    我正在处理oauth1.0(twitter和flickr)。网站工作在80端口，oauth服务器工作在8080端口算法:向oauth服务器发送ajax请求以检查用户是否有有效的access_token如果用户没有access_token或access_token已过期，则打开授权窗口在oauth服务器的用户session中保存access_token发送分享数据到oauth服务器它使用sinatra+rack:session+rack::session::sequel+sqlite来存储session。它在每个响应中发送Set-Cookie:rack.session=id我正在使用2种

  9. ruby - 简单的问题 : Read file, 在 Ruby 中反转它并写入另一个文件 - 2

    我有:o=File.new("ouput.txt","rw+")File.new("my_file.txt").lines.reverse_each{|line|?????line}o.close不知道用什么方法写入文件输出o 最佳答案 puts理解数组，因此您可以将其简化为:File.open("f2.txt","w"){|o|o.putsFile.readlines("f1.txt").reverse} 关于ruby-简单的问题:Readfile,在Ruby中反转它并写入另一个文件，

  10. 已解决socket.timeout : The read operation timed out - 2

    已解决（pip安装模块超时，利用四种国内镜像源完美解决）WARENTING:Retrying(Retry(total=4,connect=None，read=None，redirect=None，status=None))afterconnectionbrokenby‘ConnectTimeoutError(pip._vendor.urllib3.connection.HTTPSConnectionobjectatOx00001D6OE4F4A940>,‘Connectiontopypi.orgtimedout.(connecttimeout=15)’)’':/simple/pip/socke

随机推荐