Vueの単一コンポーネントでデータが渡らなかった

2022.11.18

親のテンプレートタグから子のコンポーネントに変数をバインドする時
データを渡せられるときと渡せられない時があった。

〇データを渡せられた時

<compo-hoge :fuga="piyo"></compo-hoge>

<script scoped>
module.exports = {
  data: ...略
 ,methods: ...略
 ,props: [
    'fuga'
  ]
}</script>

×データを渡せられなかった時

<compo-hoge :fooBar="piyo"></compo-hoge>

<script scoped>
module.exports = {
  data: ...略
 ,methods: ...略
 ,props: [
    'fooBar'
  ]
}</script>

Google先生は教えてくれました。
『バインディングに使用する属性はケバブケースを使用する必要があります』
なるほど。

×でもデータは渡せられなかった

<compo-hoge :foo-bar="piyo"></compo-hoge>

<script scoped>
module.exports = {
  data: ...略
 ,methods: ...略
 ,props: [
    'foo-bar'
  ]
}</script>

ケバブケースにしたぞ！
なぜ？？

〇答え

<compo-hoge :foo-bar="piyo"></compo-hoge>

<script scoped>
module.exports = {
  data: ...略
 ,methods: ...略
 ,props: [
    'fooBar'
  ]
}</script>

なんじゃそれ。
呼び出すほうだけを変換するって思わなかったわ。。。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ワイズリマインダー