TypeError: 未定義のプロパティ 'xxxx' を読み取ることができません。

vueやjsで.lengthを使うと、ブラウザのコンソールによく報告されます。 TypeError: Cannot read property 'length' of undefined といったエラーは他にもたくさんありますが、そのほとんどが TypeError: Cannot read property 'xxx' of undefined このエラーの理由は簡単で、メソッドや関数を呼び出している文字列や配列、オブジェクトなどがNULLなので、判定を追加すればいいのです。

例
次のコードで報告します。 TypeError: Cannot read property 'length' of undefined エラー

let txtDom = this.$refs.textContainer;
for (let i = 0; i < txtDom.length; i++) {
       let curHeight = txtDom[i].offsetHeight;
       if (curHeight > twoHeight) {
           this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
       } else {
           this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
       }
}

この原因は、txtDomが空のように見えるので、長さを表す属性がないためです。解決策は、以下のようにtxtDomが空かどうかを判断することです。

let txtDom = this.$refs.textContainer;
if(txtDom){
     for (let i = 0; i < txtDom.length; i++) {
         let curHeight = txtDom[i].offsetHeight;
         if (curHeight > twoHeight) {
             this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
         } else {
             this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
         }
     }
 }

上記は、jsでエラーを報告するためのコードですが、時には私たちもいくつかの関数やメソッドをhtmlで使用するだけでなく、次のような判断を行うために al.time データのバックエンドから読み込まれ、空のためかもしれない、報告されます。 TypeError: Cannot read property 'substring()' of undefined というエラーが発生します。

<el-tag size="mini" v-if="al.time">post time</el-tag>{{ al.time.substring(0,10)}}

解決策としては、三項演算子を使って判定を行うことです。

<el-tag size="mini" v-if="al.time">post time</el-tag>{{ al.time ? al.time.substring(0,10):al.time}}

これで問題は完璧に解決しました。