v-forでオブジェクトの名前を自由に設定する方法

この記事の対象者

三度の飯よりvueが好きな方

実現したかったこと

v-forのオブジェクトのプロパティ名をコンポ側で決め打ちしたくなかった ><

具体的にどういうことか

コンポ内で item.name とすると取得するプロパティ名を制約しているので使い所が限られますね。

<div v-for="(item, index) in list" :key="index">
  {{ item.name }}
</div>

コンポ側ではプロパティ名を保持しない

propsでプロパティ名を取得すればOK！
これだけで汎用的なコンポに早変わり！！

<div v-for="(item, index) in list" :key="index">
  {{ item[itemText] }}
</div>

props: {
  list: {
    type: Array,
    default: () => []
  },
  itemText: {
    type: String,
    default: ""
  }
}