• vue报错信息


    1.Property or method "xxx" is not defined on the instance but referenced during render.

    原因:xxx在template或方法中使用了,但是没有在data中定义

    2.can not read property ‘xxx’ of undefined 和 can not read propery ‘xxx’ of null

    原因:因为 调用这个xxx方法的对象 的数据类型是undefined,所以无法调用报错。类似的报错还有Cannot read property 'xxx' of null   调用方法的对象是null,也是无法调用报错

    3.Error in render function: "Type error" 

     注意,只要出现Error in render,即渲染时候报错,此时应该去渲染位置去找错误,而不是函数里面。

    4.Error: listen EADDRNOTAVAIL 192.168.3.83:3030

    原因:地址或端口号错误
    // host: '192.168.3.83', // can be overwritten by process.env.HOST
    // port: 3030, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    改为host: '127.0.0.1', 
    改为port: 8080
     

    5.Computed property "xxx" was assigned to but it has no setter.

    xxx 属性,如果没有设置 setter,也就是传入的是一个函,或者传入的对象里没有 set 属性,当你尝试直接该改变这个这个计算属性的值,都会报这个错误。
    例如:
    <template>
      <div id="app">
        <div>{{number}}</div>
      </div>
    </template>
    
    <script>
    export default {
     computed:{
       number(){
         return 123
       }
     },
     created(){
       this.number=234;       //this.number 是定义再computed的方法函数,不能直接使用修改属性的方式修改
     }
    }
    </script>

    6.Duplicate keys detected: '8'. This may cause an update error. 错误

    主要时绑定的key出现了重复

    看错误的的报告中关键字’keys’,联系错误的时机,可以知道这个错误出现在我使用vue的循环中,循环再vue或者小程序中饭为了保证每一项的独立性,都会推荐使用key,所以综上所述,很可能是key出现问题

    这里写图片描述 
    这里写图片描述 
    这里写图片描述 
    很显然后几个的index重复了,所以修改index后,就不再出现此问题了。

    7.[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of null"

    <template>
      <section class="book-info" >
        <div class="book-detail">
            <h2 class="book-title">{{ book.title }}</h2>
        </div>
      </section>
    </template>
    
    <script>
    export default {
      data(){
        return{
          book:null
        }
      },
      created(){
        http.getBook(this.currentBook.id)
         .then(data=>{
           this.book=data
           console.log(data)
         })
      }
    }
    </script>

    解决方法

    方法1.设置 book类型由null改为Object

      data(){
        return{
          book:Object
        }
      },

    方法2.设置v-if="book !== null"

    <template>
      <section class="book-info" v-if="book !== null">
        <div class="book-detail">
            <h2 class="book-title">{{ book.title }}</h2></p>
        </div>
      </section>
    </template>
    
    <script>
    export default {
      data(){
        return{
          book:null
        }
      },
      created(){
        http.getBook(this.currentBook.id)
         .then(data=>{
           this.book=data
           console.log(data)
         })
      }
    }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
  • 相关阅读:
    在Windows下Mysql如何重置root用户密码
    textrendering 详解
    修复IE6 PNG不透明问题的最佳解决方案
    机电传动控制第一周学习笔记
    WEB架构师成长之路之二大牛的法宝
    WEB架构师成长之路之一走正确的路
    WEB架构师成长之路之三架构师都要懂哪些知识
    hdu 1081 To The Max(最大子段和的升级版,二维)
    hdu 1080 (DP LCS最长公共子序列)
    添加\删除注册表项
  • 原文地址:https://www.cnblogs.com/zjx304/p/9820670.html
Copyright © 2020-2023  润新知