3

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

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

<template>
    <div> <!-- MY DOM --> </div>
</template>

<script>
    export default {
        data () {},
        methods: {},
        route: {
            activate() {},
        },
        ready: function(){}
    }
</script>

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

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

4

3 に答える 3

2

Vue.js Router を使用しているため、新しいルートに移行するたびに、Vue.js は DOM を更新する必要があります。デフォルトでは、Vue.js は DOM 更新を非同期で実行します。

Vue.js が DOM の更新を完了するまで待機するには、Vue.nextTick(callback) を使用できます。コールバックは、DOM が更新された後に呼び出されます。

あなたの場合、試すことができます：

route: {
    activate() {
        this.$nextTick(function () {
            // => 'DOM loaded and ready'
        })
    }
}

詳細については：

于 2016-07-14T02:29:35.547 に答える
0

これは少し遅いかもしれませんが...私が正しく推測すると、ルート間を移動すると、問題のあるコンポーネントがページに残ります。このように、Vue はコンポーネントを再利用し、コンポーネントを破棄して再作成するのではなく、内部の変更が必要なものを変更します。Vue は にkey属性を提供しますProperly trigger lifecycle hooks of a component。コンポーネントのkeyを変更することで、Vue に再レンダリングを指示できます。詳細についてはkey in guideを、コード サンプルについてはkey in apiを参照してください。

于 2016-10-24T06:37:31.320 に答える