Jquery and Vue、.html（）が機能していません

Question

私はVueチュートリアルHereで遊んでいて、シンプルなJquery .html関数を追加しました。しかし、それは動作していません。 jQueryプラグインを追加しましたが、コンソールにエラーはありません。私は、コンソールに「負荷でナビ」を見ることができます

function loadMainNavigation() { 
    $('#mainMenu').html("ASERFDASRF"); 
    console.log("In load Nav"); 
} 

：このような

<template> 
<div id="app"> 
<div id="mainMenu"> Hello </div> 
</div> 
</template> 

<script> 
import * as start from './assets/scripts/start.js' 
export default { 
    name: 'app', 
    created: start.loadMainNavigation() 
} 
</script> 

と私のloadMainNavigation機能：私はこのように定義された私の「アプリケーション」コンポーネントを持っています。エラーはありませんが、DIVには元の "Hello"が残っています - 何が間違っていますか？

Answer 1

コンテンツが変更されないのは、機能を実行している時点で、the component has not yet been rendered to the DOMです。 DOMはmountedイベントまでレンダリングされません。

しかし、それ以外では、jQueryとVueの統合時には注意するか、まったく避ける必要があります。これを行う慣用的なビューの方法は、このようなものになります。

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    message: "Hello" 
 
    }, 
 
    created(){ 
 
    this.message = "ASERFDASRF" 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app"> 
 
    <div id="mainMenu"> {{message}} </div> 
 
</div>

（あなたがたとえば、何のVueの対応はありませんそのためのjQueryプラグインを使用する場合）あなたはjQueryとVueのを混ぜるかもしれないいくつかの時間がありますが、一般的に、そこにありますほとんどいつもあなたが望むことをする方法なしで jQuery。