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>