100DaysOfCode #13: Vue.js: ドキュメントの「はじめに > コンポーネントによる構成」で詰まったら？

やったこと

Vue.js > はじめに > コンポーネントによる構成: 1h

記事にはまとめたけどちょうしわるめ。

今日の進捗のコードはコチラ。

みんなの進捗を応援！

Twitter @bwolftech で応援(Fav & RT)した進捗を紹介します💖

Day27
学習時間：5h
課題23作成中#CAKEPHP
ログインの認証が上手くいかない
Authの使い方で悩む#100DaysOfCode #プロサー
— Whomeoh@Old Rookie42 (@Whomeoh0911) July 13, 2019

認証周り…データがちゃんと渡っているかを見た後にファイトー＼＼\٩( 'ω' )و//／／

Laravelにて名前付きルーティングの設定を学びました。#100DaysOfCode pic.twitter.com/sOFwCNJaz3
— ヨッピー (@yyyooopppy) July 13, 2019

おおっ、アプリケーションの形を想像しながら設定してみましょー

きづいたこと - ドキュメントの「はじめに > コンポーネントによる構成」で詰まったら？

Vue.jsの公式チュートリアルとも言えるドキュメントの「はじめに > コンポーネントによる構成」の中で作成したコンポーネントに props を渡すケースがありますが、

jp.vuejs.org

propsの名前の付け方が正しくないとVueのコードが動作しない原因になります。

結論: HTML内ではケバブケース / JavaScript内ではキャメルケースにする

Vue.js のドキュメント( プロパティ — Vue.js )に書いてあるとおり、propsの名前は

HTML内ではケバブケース (ex. sample-item)
JavaScript内ではキャメルケース(ex. sampleItem)

にすることが推奨されています。

「はじめに」のドキュメントから「プロパティ」の単語をクリックし、更にそのドキュメント内の「プロパティ」からプロパティの全ドキュメントを見ないと気づきにくいため、

「はじめに」に載っているサンプルから 名前を変えて試してみようという方は要注意です。

後でプロパティの全ガイドを読むことをお勧めします。

f:id:y-mix:20190713204906p:plain

#「はじめ」にではなく次の「コンポーネントの基本」でpropsをカスタマイズする話が出てくるので、いきなり「はじめに」でpropsをカスタマイズしようとしたのがレアケースかも

propsの名前を両方キャメルケースにすると正しく渡らない

HTML/JavaScriptの 両方で propsの名前をキャメルケースにすると正しく動作しません。
(Vue.js v2.6.10 で確認しました)

HTML

    <ul>
      <sample-props-component
        v-for="item in list"
        v-bind:sampleItem="item"
        v-bind:key="item.id"></sample-props-component>
    </ul>

JavaScript

Vue.component('sample-props-component', {
  props: ['sampleItem'],
  template: '<li> {{ sampleItem.text }} </li>'
});

var app = new Vue({
  el: '#app1',
  data: {
    list: [{
        id: 3,
        text: "これが"
      }, ...

f:id:y-mix:20190713201749p:plain

vue.js:640 [Vue tip]: Prop "sampleitem" is passed to component , but the declared prop name is "sampleItem". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "sample-item" instead of "sampleItem".

ケバブケースに直すように指摘されますが、propsに渡したはずのオブジェクトで text プロパティを見失っています。

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'text' of undefined"

propsの名前を両方ケバブケースに直しても正しく渡らない

また、HTML/JavaScriptの 両方で propsの名前をケバブケースにすると同様に正しく動作しません。
(Vue.js v2.6.10 で確認しました)