web-dev-qa-db-ja.com

vue：Uncaught TypeError：未定義のプロパティ...を読み取れません

私は[email protected]と vue公式webpackテンプレート を使用してアプリを構築しています。

ローカルで開発するとき、私はしばしば警告_Uncaught TypeError: Cannot read property ... of undefined_を目にしますが、HTMLは正常にレンダリングできます。ただし、_npm run build_コマンドを使用してNetlifyにHTMLを展開すると、HTMLをレンダリングできません。ですから、私はこの警告を真剣に扱わなければなりません。

here から学んだのは、「コンポーネントがレンダリングされたときにデータが完全ではなく、たとえばAPIからロードされたため」だからです。解決策は、「_v-if_を使用して、データがロードされた後にのみテンプレートのその部分をレンダリングする」ことです。

2つの質問があります。

  1. 警告を生成している複数のステートメントを_v-if_でラップしようとしましたが、個人的にはこの解決策は冗長だと思います。きちんとしたアプローチはありますか？
  2. ローカル開発の「警告」は、本番環境では「致命的なエラー」（HTMLをレンダリングできません）に変わります。それらを同じにする方法は？例えばどちらも警告またはエラーを発行しますか？
vue.jsvue-componentnetlify
19
Jerry Zhang

単にv-ifは、AJAXの呼び出しではなく、各要素の周囲ではない）に依存するテンプレート内のすべての要素の共通の親にあります。

したがって、次のようなものの代わりに：

<div>
  <h1 v-if="foo.title">{{ foo.title }}</h1>
  <p v-if="foo.description">{{ foo.description }}</p>
</div>

行う

<div>
  <template v-if="foo">
    <h1>{{ foo.title }}</h1>
    <p>{{ foo.description }}</p>
  </template>
</div>
33
Bill Criswell

必要なすべてのデータを初期化しようとしましたか？例えばabcが必要な場合は、以下を実行できます。

new Vue({
  data: {
    a: 1,
    b: '',
    c: {}
  },
  created(){
    // send a request to get result, and assign the value to a, b, c here

  }
})

この方法では、xx is undefinedエラー

5
Sabrina Luo

男は正しいが、私は何かを追加することができます。条件内のルート要素が何らかの理由で未定義になる可能性がある場合、次のようなものを使用することをお勧めします。v-if='rootElement && rootElement.prop'。 cannot get property prop of undefinedrootelementが未定義の場合、それ以上のチェックは行われません。

2
M U