Q&A
###前提・実現したいこと
言語：Vue2.x系
環境：vueify + browserify + babel
view(index.html)から、vueファイルにプロパティ(名称)を渡す。
名称は、プリコンパイル時にはわからない。
※最終的には、JSPの画面からVueを使ったSPAを値を渡して呼び出したいと考えています。
###該当のソースコード
以下のソースコードを動かすと、名称が表示されない。
(Hello とのみ表示される。)
■index.html
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>hello</title> 5 </head> 6 <body> 7 <div id="app" name="New User"></div> 8 <script src="app.js"></script> 9 </body> 10</html>
■main.js
JavaScript
1window.onload = function(){ 2 const Vue = require('vue'); 3 const App = require('./app.vue'); 4 const app = new Vue({ 5 props: ['name'], 6 render: h => h(App) 7 }).$mount('#app') 8}
■app.vue
HTML
1<template> 2 <div><h1>Hello {{name}}</h1></div> 3</template> 4<style></style> 5<script></script>
■プリコンパイル時のコマンド
browserify -e main.js -o app.js
###試したこと
以下のように、すべてindex.htmlで記載すると、想定通りの動きをする。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>hello</title> 5 </head> 6 <body> 7 <div id="app" name="New User"></div> 8 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script> 9 <script> 10 var app = new Vue({ 11 el: '#app', 12 template: '<h1>Hello, {{name}}</h1>', 13 props: ['name'] 14 }); 15 </script> 16 </body> 17</html>
これが、以下のどちらなのかがわからず苦しんでおります。
①単純にコーディングミスで動かない。
②実行時コンパイルでしか、index.htmlからvueにプロパティを渡せない。
①でしたら、不備な点を。
②でしたら、ほかの回避方法をご教授いただければ幸いです。
(②の回避方法としては、今のところvueファイルのscriptからDOM要素を直接見に行く方法しか思いついていません。)
なにとぞ、よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
npm list --depth=0
+-- babel-core@6.24.1
+-- babel-plugin-transform-runtime@6.23.0
+-- babel-preset-es2015@6.24.1
+-- babel-runtime@6.23.0
+-- babelify@7.3.0
+-- browserify@14.3.0
+-- vue@2.3.3
`-- vueify@9.4.1
回答1件
0
ベストアンサー
すでに自己解決してるかもしれませんが動くところまで行けたので記述しておきます。
(すべてindex.html
で使用されているVueJSが1系なのですが、言語で2系と書かれていますので2系で試しました。)
index.html
<!DOCTYPE html> <html> <head> <title>hello</title> </head> <body> <div id="app" name="New User"></div> <script src="app.js"></script> </body> </html>
main.js
window.onload = function(){ const Vue = require('vue'); const App = require('./app.vue'); const app = new Vue({ render: function(createElement) { return createElement(App, { props: { name: this.$el.attributes["name"].value } } ); }, }).$mount('#app') }
app.vue
<template> <div><h1>Hello {{name}}</h1></div> </template> <style></style> <script> export default { props: ['name'], } </script>
でHello New Userと出るのは確認しました。
※参考サイト
https://forum.vuejs.org/t/passing-props-to-root-instances-in-2-0/244/10
投稿2017/06/06 03:01
総合スコア5545
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/16 00:16