問題タブ [vue-router]

vue.js と vue-router を使用しているプロトタイプがあります。

App.vue には私のrouter-viewマウント ポイントが含まれています。Locationアプリには、共有状態に保存されている位置データに基づくコンポーネントのリストも含まれています。

App.vue:

状態.js:

Location.vueコンポーネントは、ルーターをトリガーするために使用している を保持しますv-links。

Location.vue:

私が望むのは、特定の場所がクリックされたときに、ルーターによって呼び出されるコンポーネント (Details.vueまたはPics.vue) に、指定された場所の状態インスタンスを prop として渡すことです。v-link

私が抱えている問題は、ドキュメントがこれを行うことができると言っていることは知っていますが、これを行う方法を説明しておらず、方法を理解できていないことです. router-view私はin に場所をバインドしようとしましたApp.vue:

そして、それをプレースホルダーにバインドしますrouter-view：

どちらも機能しません。

これを行う適切な方法は何ですか？

ここに問題の WebpackBin デモがあります: http://www.webpackbin.com/4kDRbt28W

現在、vue.js と vue-router を使用したプロジェクトに取り組んでいます。いくつかのニュースを表示するビューを取得し、それらのニュースを API (ブログのようなもの) から取得しました。

ここでrouter.data述べたように、コンポーネントのデータを設定するために、現在これらのニュースを にロードしています。問題なく動作しています。

しかし、私の問題は、このビューに移動したときにニュースの出現をアニメーション化したいということです。readyコンポーネントからプロパティを使用しようとしましたrouter.dataが、要素がないため、ニュースの取得が完了する前に呼び出され、アニメーションでエラーが発生します。

取得したニュースが DOM 内で完全にレンダリングされたら、どうすればアニメーションをトリガーできますか?

私のコンポーネントのコードは次のとおりです。

私は、Vue.js とその公式ルーターを使用して単一ページのアプリに取り組んでいます。

ルーターを使用してロードするセクションごとに、メニューとコンポーネント (.vue ファイル) があります。すべてのコンポーネントに、次のようなコードがあります。

コンポーネントの遷移が完了したら、コードを実行したい (jQuery プラグインを初期化する) 必要があります。readyイベントにコードを追加すると、コンポーネントが最初にロードされたときにのみ起動されます。コードを追加すると、route.activate毎回実行されますが、DOM がまだロードされていないため、jQuery プラグインを初期化できません。

コンポーネントの移行が完了し、DOM の準備が整うたびにコードを実行するにはどうすればよいですか?

SPA で Vue と Vue Router を使用しています。ビュー コンポーネントで、リソースのリポジトリをクエリします。リソースが見つからない場合は、URL を保持したまま 404 ページを表示したいと考えています。

つまり、アクセスする/foo/non-existant-idと、リソースの表示ページの代わりに 404 ページが表示されますfoo。

わかりやすくするために、ここに私のルーターマップを示します。

そして、私FooShowPageは次のことを行います：

基本的にはFooShowPage、ルーター ビューの を に置き換えるNotFoundPageか、定義された 404 ページにリダイレクトする一方で、ブラウザの履歴はそのままにしておく必要があります。

ネストされた JSON の特定のレベルの各要素に、それ自体のパラメーターを使用して JSON を繰り返し挿入することになっている私の関数は、返された最初のオブジェクトを複製し、それを各ネストされたパラメーターに挿入しています。以下のスクリーンショットとコードを参照して、私が何をしているのかを感じてください。

基本的に、状態内にネストされた JSON オブジェクトがあり、API から JSON を返すアクションと状態を更新するミューテーションを使用して、既存のオブジェクトの各「行」のネストされたプロパティに繰り返し追加する必要があります。

問題は突然変異の中にあると思います。私の関数は、API から返された最初の JSON オブジェクトを複製していると推測しました。API 関数および JSON の構造とともに、以下の Action および Mutation 関数を参照してください。

http://api.capecodcommission.org/docs/index.html#sumofannualcapitaltotalsfor Treatment

v-for を使用して実行される特定のコンポーネント内の関数:

関数の実行、JSON の表示:

V-for ループ:

API 関数:

アクション: API から JSON をプルし、ミューテーション関数をディスパッチします。

Mutation: JSON で状態を更新します。

編集：下の写真

コンポーネント: http://i.imgur.com/lcS5Fgo.jpg

JSON 構造: http://i.imgur.com/AsANZOp.jpg

今日やりたいことは、Vue.js と Rails を統合することです。これが基本的に私が達成したいことです:

これには Rails エンジンを作成し、Vue.js を使用する必要があります。Vue と Rails の統合に成功しましたが、ここに問題があります。

• 価格は、Rails のコントローラーによって送信される必要があります
• 選択して「次へ」をクリックすると、カートが即座に更新され、合計金額が自動的に計算されます
• 「前へ」をクリックすると、カートが更新されます
• また、上部のプログレスバーは自動的に更新されるはずです。しかし、それは私が後で気にすることができる別の話です.

Vue-Router などを使用する必要があるかどうかはわかりません。すべての Vue コンポーネントを親コンポーネントでラップする必要があると思いますが、「前」と「次」のリンクをどのように処理できますか?

ありがとう ！

次のように定義された vue-router 'router-view' 要素がある場合:

<router-view transition="slide">

特定のルートが呼び出されたときに遷移を「フェード」に変更する方法はありますか?