Vueのメインアプリケーションをbody要素にレンダリングするには？

私は、「ページ」と呼ばれる有料のテーマを使用するプロジェクトで管理ページを構築しています。Vueのメインアプリケーションをbody要素にレンダリングするには？

これらのテーマでは、<nav>と<header>は<body>の直系子である必要があります。

私はアプリをブートストラップするためにVueを使用するとき、rootに設定されたidで<div>にレンダリングしています。これにより、このコンテナ内の<nav>と<header>がネストされます（つまり、<div id="root">）。

私は、Vueコンポーネントを直接の子どもの体にする方法について、高低を探しています。

これを行う方法？

私は何を取得しています：

は

<body> 
    <div> 
     <nav></nav> 
     <header></header> 
    </div> 
</body>

テーマが必要とするもの：

<body> 
    <nav></nav> 
    <header></header> 
</body>

出典

2017-03-13 James Lewis

あなたのテーマが使用している子セレクタ？（例： 'body> div'）。 Vueはボディータグにマウントするのが好きではありません。 –

Vue 2.0では、bodyインスタンスまたはhtml要素にrootインスタンスをマウントできません。 [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.エラーメッセージが表示されます。

提供された要素は単にマウントポイントとして機能します。 Vue 1.xとは異なり、マウントされた要素はすべての場合にVue生成DOMに置き換えられます。したがって、ルートインスタンスを<html>または<body>にマウントすることは推奨されません。

https://vuejs.org/v2/api/#el

を回避する方法は、手動でコンポーネントmount()イベントであなたの要素を移動することです。

<div id="app"> 
    <navbar :msg="msg"></navbar> 

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

    <button @click="msg = 'tested'">Test 2-way binding</button> 
</div>

ワークフロー例： `body`から

new Vue({ 
    el: '#app', 
    data: { 
    msg: 'message' 
    }, 
    components: { 
    'navbar': { 
     template: `<navbar>{{ msg }}</navbar>`, 
     props: ['msg'], 
     mounted() { 
     document.body.insertBefore(this.$el, document.body.firstChild) 
     } 
    } 
    } 
})

https://jsfiddle.net/jedrzejchalubek/m9dnsjjr/2/

出典

2017-03-14 00:16:17 jedrzejchalubek

がちょうどbodyレベルでルートレンダリングフックを宣言し、例えば：

<body id="root"></body>

＆hellip;

<body> 
    <div id="root"></div> 
</body>

出典

2017-03-13 16:35:51

私はこれを試しましたが、Vueは私が身体に直接レンダリングすることを許可しませんでした。 –

Vueのメインアプリケーションをbody要素にレンダリングするには？

答えて

関連する問題