[Vue] propsでhtmlからvueに値を渡す方法について

いつも大変お世話になっております。

すみません、超簡単な内容かと思うのですが、
久しぶりにVueを触ってみたところどうしても動かず困っております。

実現したいことはシンプルにhtmlの値をVue側に渡し、
console.logで出力するだけになります。

想定ではコンソール上に　aaa が出力されると思うのですが、
どうしても undefined が表示されてしまいます。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta http-equiv="X-UA-Compatible" content="IE=edge">
5  <meta charset="utf-8">
6</head>
7<style>
8    [v-cloak]{
9        display : none;
10    }
11</style>
12<body>
13<div id="app" v-cloak>
14
15  <div product="aaa">テスト</div>
16
17</div>
18<script src="https://jp.vuejs.org/js/vue.js"></script>
19<script>
20
21	new Vue({
22
23		props : [ 'product' ],
24
25		mounted(){
26
27			console.log(this.product);
28
29		}
30
31	}).$mount("#app");
32
33</script>
34</body>
35</html>
36

どなたか解決法がわかる方がいらっしゃればご教授いただけますと幸いです。
それではどうぞ宜しくお願い致します。

surface_0

2021/11/08 08:08

こちらは解決してましたら、解決済みにしてください。

matsuo_basho

2021/11/09 04:08

すみません、完全に失念しておりました！リマインドありがとうございます、、！

行動規範の内容に同意します

回答1件

ベストアンサー

propは子コンポーネントへの値の受け渡しなので、親子関係を作る必要があります。
以下は子コンポーネントとしてchildコンポーネントを作る雑な例です。

html
1<div id="app" v-cloak>
2  <child product="aaa"></child>
3  <div>テスト</div>
4</div>
5<script src="https://jp.vuejs.org/js/vue.js"></script>
6<script>
7    Vue.component('child', {
8      template: '<b>{{product}}</b>',
9      props: [ 'product' ],
10        mounted() {
11          console.log(this.product);
12        }
13    });
14
15    new Vue({}).$mount("#app");
16</script>

投稿2021/10/14 06:44

surface_0

総合スコア497

matsuo_basho

2021/10/14 09:09

ご回答いただき誠にありがとうございます！ちなみにただシンプルにhtmlの値をvue側に渡したいのですが、その方法ってあるのでしょうか？

surface_0

2021/10/14 09:42

> ちなみにただシンプルにhtmlの値をvue側に渡したいのですが、値を渡すというのがどういうケースを想定してるのかが、提示されてるソースだけではシンプルすぎて想像できません。なので、もうちょっと深堀りしてもらわないと答えられません。これだけなら『直接書けば良い』で終わってしまうので。

matsuo_basho

2021/10/14 12:08

すみません、遅くなりました、、。状況として、現在Shopifyの開発をしています。 Shopilfyではテンプレートごとにオブジェクトが自動でhtml側に与えられるのですが、そのオブジェクトをVue側に渡したいということになります。

surface_0

2021/10/15 02:24 編集

Shopilfyはよく知らないのであまり詳しいことは言えませんが、軽く検索したところjsonフィルタというものがあるみたいなので、これでオブジェクトをVueインスタンスの定義に埋め込めばいいのではと思います。 https://qiita.com/eijiSaito/items/f414d9f2ea1319360899#json ``` new Vue({ data() { return { product: {{ product | json }} }; }, ... ``` 的外れでしたらすいません。

matsuo_basho

2021/10/15 03:08

お調べいただき誠にありがとうございます！ liquidファイル内にvueを記述せずにjsファイル内にvueを記述したかったのですが、どうやらそれができないようでししたので、当初よりご提案いただいていたように liquidファイル内にvueを記述し、直接{{ product | json }}を設定するようにしました！色々とありがとうございました！

行動規範の内容に同意します