34

vue@2.1.3 とvue の公式 webpack テンプレートを使用してアプリを構築しています。

ローカルで開発しているとよくワーニングUncaught TypeError: Cannot read property ... of undefinedが出ますが、HTMLは正常にレンダリングできます。ただし、コマンドを使用して Netlify にデプロイされている場合、HTML をレンダリングすることはできませんnpm run build。したがって、この警告を真剣に扱わなければなりません。

それは「コンポーネントをレンダリングした時点ではデータが完全ではなく、たとえば API からロードした」ためであることがここでわかりました。解決策は、「v-ifデータがロードされた後にのみ、テンプレートのその部分をレンダリングするために使用する」ことです。

2 つの質問があります。

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

4 に答える 4

59

テンプレート内のすべての要素に共通の親を使用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>
于 2016-12-09T02:06:01.230 に答える
8

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

于 2016-12-09T08:07:19.210 に答える
7

必要なすべてのデータを初期化しようとしましたか? たとえば、必要な場合はa b c、次のことができます。

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このようにして、エラーが発生することはありません

于 2016-12-09T02:44:37.820 に答える