Q&ACDNでVueを利用しています。
Vue2で作成していたシステムをVue3に移行しようとしていましたが、互換性のない部分でつまずきました。
今までVue2でこのように記述していました。
html
1<div id="index"></div>
javascript
1new Vue({ 2 template : ` 3 <div id="index" class="page index">～～～</div> 4 `, 5 el: "#index" 6});
このnew Vueで、HTML部分は、下記のように展開されていました。
html
1<div id="index" class="page index">～～～</div>
Vue3にして、このように記述したら、
javascript
1Vue.createApp({ 2 template : ` 3 <div class="page index">～～～</div> 4 ` 5}).mount("#index");
このように展開されるようになりました。
html
1<div id="index"> 2 <div class="page index">～～～</div> 3</div>
vue2ではpageクラスなどが展開先の同階層だったのに、Vue3では内部に展開されるようになってしまいます。
すでに同階層で展開される前提でCSSを組んでいるため、この変更で大きく見た目が崩れてしまい、困っています。
Vue2のときのように同階層に展開するような記述方法はないものでしょうか？
なお、システム全体としては、
html
1<body> 2 <div id="index" class="page index"></div> 3 <div id="user" class="page user"></div> 4 <div id="shop" class="page shop"></div> 5 <div id="coupon" class="page coupon"></div> 6</body>
のような感じで、どれかひとつのpageクラスだけを表示して切り替えるシングルページアプルケーションで、
pageごとにnew Vueしています。
回答1件
0
自己解決
自己解決しました。
Vue2ではtemplateは1個のタグしか持てなかったけど、Vue3では複数のタグを持てるようになっていたので、これを利用して解決しました（というよりも、内側に入るようになったからこそ複数持てるようになったというべきでしょうか）。
具体的には、
html
1<div id="index" class="page index"></div>
javascript
1Vue.createApp({ 2 template : ` 3 ～～～(複数のHTMLタグ)～～～ 4 ` 5}).mount("#index");
とすることで、Vue2のときと同じタグ構成にすることができました。
投稿2021/01/07 05:04
総合スコア1449
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。