親コンポーネントから子コンポーネントへpropsを使って値を渡す際にハマったこと

こんな感じで、example-component(子コンポーネントに)①itemsと②newItemsの二つのjsonを渡したい

親コンポーネント

<example-component items="{{ json_encode($items) }}" newItems="{{ json_encode($newItems) }}" ></example-component>

子コンポーネント

  props: {
    items: String,
    newItems: String
  },

がこれでやると、①itemsは問題なく渡せるが、②newItemsがundifindになってしまう

なんと、htmlは大文字小文字を区別できず全て小文字になってしまうそう...。
なので↓に修正する

親コンポーネント改

<example-component items="{{ json_encode($items) }}" new-items="{{ json_encode($newItems) }}" ></example-component>

間に「-」を挟むことで、子コンポーネント側ではnew-items→newItemと認識してくれるようになる

初歩的かもしれませんが、僕はこれで1日を無駄にしてしまったので、みんな気を付けてくれ！