はVue.js

で "未定義" という警告を理解しようとするとこれは私のブラウザのコンソールに表示されます。はVue.js

[Vue warn]: Error when evaluating expression "permissions.edit": TypeError: Cannot read property 'edit' of undefined (found in component: <heading>)

関連コード：

：中

{{ permissions | json }} 
<a class="button" v-on:click="toggleEditMode" v-if="permissions.edit">{{ editMode ? 'Save' : 'Edit' }}</a>

結果パーミッションは明らかに未定義ではありません。どうしたの？問題をもっと混乱させるために、リテラルオブジェクトをコンポーネント（:permissions="{edit: true}"）に渡すと、警告は消えますが、{{ permissions | json }}のjson出力はまったく同じように見えます。

出典

2016-04-11 fpcjh

Vueがそれに気付かなかったように、何らかの形で 'edit'プロパティを追加したという問題があるようです。（jsonフィルタは反応性を気にしないので、そこには関係ありません）いつ、どうやってパーミッションオブジェクトを作成/埋めていますか？あなたは 'ready（）'フックなどのどこかでそれを変更しますか？すでに 'edit'プロパティを持つ' data'コンポーネントの 'permissions'オブジェクトを定義しましたか？これらは私たちが必要とする関連情報です。 –

これは、私のViewModelの 'created（）'メソッドで作成された、vue-resourceからのサーバレスポンスです。これは 'this。$ set'でViewModelに割り当てられ、テンプレート内の小道具として渡されます。 – fpcjh

そこに行きます。 vue-resourceを使用したAPi呼び出しは非同期です。つまり、Vueは終了するのを待たず、代わりにAPI呼び出しよりもはるかに速いテンプレートをコンパイルし続けます。したがって、Vueが 'permissions.edit'を評価するとき、まだAPIコールがバックグラウンドで行われているので、まだ設定されていません。その呼び出しが終了すると 'permissions'が正しく設定され、テンプレートはexpectdとして動作します。 –

あなたの投稿へのコメントで説明したように、それはcreated()で最初に行う非同期API呼び出しのために、アクセス権オブジェクトを最初に取得するためです。

https://github.com/vuejs/vue-async-dataなどを使用することをおすすめします。これにより、データを非同期的に取得することができ（たとえば、vue-resourceを使用）、コンポーネントコンテンツを非表示にする方法が提供されますuntil loading the data has finished。

あなたは簡単に自分でこれをシミュレートすることができますが：

data: function() { 
    return { loaded: false, permissions: {} } 
}, 
created() { 
    return this.$http(...).then(function (result) { 
    this.permissions = result.data.permissions // or however your data is 
    this.loaded = true 
    }) 
}

とテンプレートで、権限が実際にロードされるまで内容を非表示にするラッピングのdivにv-if="loaded"を使用しています。

出典

2016-04-11 22:11:29

これは私が必要としていたものですが、まだ双方向バインディングの周りを頭で覆そうとしています。ありがとう！ – fpcjh

permissionsはVue pathオブジェクトではないためです。あなたが小道具としてそれを渡すと、それは一つになり、あなたはそのようにそれを参照することができます。さらに詳しい説明のためにコンポーネントの完全なコードを提供できますか？

出典

2016-04-11 19:55:40 bartlomieju

答えて

関連する問題