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

カスタムデータ属性を持つ要素に 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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です