カスタムデータ属性を取り扱う方法 (data-* / dataset) [Vue.js]

カスタムデータ属性を取得する

カスタムデータ属性を持つ要素に ref 属性を付与してコンポーネント内で参照できるようにする。

<div
  data-user-name="john123"
  ref="currentUser">
</div>

コンポーネントのマウント後に $refs を使って要素を参照し、dataset プロパティからカスタムデータ属性を取得する。

mounted: function () {
  this.name = this.$refs.currentUser.dataset.userName
}

参考：

HTMLElement.dataset | MDN

子コンポーネントインスタンスと子要素へのアクセス | Vue.js [公式]

ref | Vue.js [公式]

vm.$refs | Vue.js [公式]

Getting a data attribute value | Vue Forum

カスタムデータ属性にバインディングする

参考：

Vue.js でカスタムデータ属性を使う – Qiita

Using HTML5 data-* attributes with Vue 2.0 | Laracasts

VueJS Use prop as data-attribute value – Stack Overflow