草庐IT

Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“，深层次数据处理报错？？？？

鱼儿在游哦 2023-05-10 原文

vue中出现很烦人的红色报错，例如，如下图：
1.

2. Error in render: “TypeError: Cannot read properties of undefined (reading ‘name‘)“
一般这样的length读取出现的报错，往往很令人苦恼，vue虽然正常渲染，但是
为什么会出现这样的问题呢?

  1. 在vue的生命周期阶段初始化开始之后，生命周期就开始了，
  2. 把data中的所有数据都通过Object.defineProperty都定义到vm上，vm上面就有数据了。
  3. 确定是否有el参数指定vue控制html模板范围，有就继续向下走，没有就等待vm.$mount调用后再向下走。
  4. 。。。。。
    如上所述，el未进行挂载，数据就先渲染，会造成出现上面的报错。
    解决方案：
    1.可以给你想要渲染的数据加上v-if或者三元运算进行判断。
<template>
  <div>
  <van-button type="primary" @click="LookImg">查看</van-button>
   <van-popup v-model="show" closeable close-icon-position="top-left" :overlay="false" :style="{ height: '100%',width:'100%' }">
   // 这里通过 v-if 进行判断，错误就可以解决了
    <van-nav-bar v-if="Data.photos" :title="'剧照'+'('+Data.photos.length+')'"/>
   // 这里通过 三元运算进行判断，错误就可以避免了
     <input  :value="Data.photos ? Data.photos.name : '' "/>
    <van-row gutter="2" justify="center">
      <van-col  span="8"  v-for="item in Data.photos" :key="item">
        <van-image
        class="photo-context"
        height="100x"
        width="100%"
        :src="item"
        />
      </van-col>
    </van-row>
  </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    Data: {
      type: Object,
      default () {
        return { }
      }
    }
  },
  data () {
    return {
    show:false

    }
  },
  created () {

  },
  methods: {
  LookImg(){
  this.show = true
  }

}
</script>

2.如果是在方法中进行对length进行求值，那么我们可以这样：
如果在项目中直接赋值会出错，比如:“length of undefined”这样的报错

this.roleNumber = this.Data.role.length // 报错

我们的解决方法就是在方法中现对其进行if()判断，然后在进行赋值

// 可以对想要的属性或者是值的上一层进行if判断 比如，length的上一层进行判断
if(this.Data.role){
this.roleNumber = this.Data.role.length // 完美解决vue报错的问题
}
ldquolsquospanclasstokenvue.js前端javascript

有关Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“，深层次数据处理报错？？？？的更多相关文章

  1. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  2. 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|

  3. ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式？ - 2

    给定一个复杂的对象层次结构，幸运的是它不包含循环引用，我如何实现支持各种格式的序列化？我不是来讨论实际实现的。相反，我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby，我想解析XML和JSON数据以构建复杂的对象层次结构。此外，应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗？在任何提到的情况下，我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好，这样我以后就可以轻松支持多种XML格式。 最佳答案 我最

  4. 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

  5. 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'，所以这样

  6. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  7. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  8. 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

  9. ruby - 如何使用 Ruby HTTP::Net 处理 404 错误？ - 2

    我正在尝试解析网页，但有时会收到404错误。这是我用来获取网页的代码:result=Net::HTTP::getURI.parse(URI.escape(url))如何测试result是否为404错误代码？ 最佳答案 像这样重写你的代码:uri=URI.parse(url)result=Net::HTTP.start(uri.host,uri.port){|http|http.get(uri.path)}putsresult.codeputsresult.body这将打印状态码和正文。

  10. 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

随机推荐