問題タブ [vuejs2]

Vue.jsバニラ JavaScript と同様にリダイレクトを行いたい

Vue.jsでこれを達成するにはどうすればよいですか?

VueJS コンポーネントを利用してスクリプトをクリーンアップしたいと考えています。したがって、Laravel にロードする各ページのコンポーネントがあります。これまでのところ、すべて正常に動作しています。しかし、現在のスクリプト ロジックをコンポーネントに転送する際に問題があります。

これは、使用するコンポーネントをインポートする現在のスクリプト設定です。

main.js

私にとっての鍵はそのwindow.app = new Vue...部分です。私は Google マップを使用しているため、ページが読み込まれると app.init メソッドが検索されます。これは、ブレード テンプレート内にロードしているスクリプトの一部です。

個々のページ (Vue のモジュールごとに作成する場所) は次のようになります。

変数を定義することvueViewで、スクリプトにインポートしている正しいモジュールが使用されます。

目標は、HomeViewコンポーネントをメインの Google マップ ビューとして使用することです。そして、テーマの対応するリンクをクリックしたときにロードするさまざまなページの他のコンポーネント。最後に、すべての VueJS コードを 1 つのスクリプトに含めたくありません。したがって、モデル。

この現在の JS ファイルのすべてのコンテンツを転送するとapp.init、関数ではないというエラーが表示されます。コンポーネントは次のようになります。

app.init ロードが機能するようにコンポーネントを変更するにはどうすればよいですか?

vue 1 では、これを行っていました: v-bind:class='{"isdanger": invalidLogin}'.

今、私は Vue 2 アプリで同じことをしようとしていますが、このエラーが発生しています:

template syntax error - invalid expression: v-bind:class="{'isdanger': invalidLogin}"

念のため、使用してpugいます。

何か案は？

Vue 2.0-rc.6 (現時点で最新) と Vue-router 2.0-rc.5 (現時点で最新) を使用しています。

this.$emit('custom-event')ルーター コンポーネントの 1 つとthis.$on('custom-event', () => { console.log('I heard an event') })Vue インスタンスで実行しようとしましたが、イベントがリッスンされていませんでした。ルーター コンポーネント自体はイベントを聞いていましたが、Vue インスタンスは聞いていませんでした。

何か案が？

このjsfiddleをチェックしてください。

//お店

//成分

//見る

//エラー

非同期にロードしたいかなり重いコンポーネントがあり、同時に、ロード中にロードスピナーをユーザーに表示します。

loadingこれは私の最初の試みdataですv-if="loading"。this残念ながら、Vue が内部の関数に対して適切に再バインドしていないように見えるため、これは機能しませんcomponents-

私はいくつかの Vue 1.0 の例も見つけましたが、それらは依存していました$refs- 2.0 では$refsもはや反応的ではなく、これには使用できません。残された唯一の方法は、子コンポーネント自体がアプリケーション データ状態へのマウント ライフサイクル イベントで何かを実行して、読み込み中のスピナーを削除することですが、それは少し重いようです。これを行うより良い方法はありますか？