DOM Element Attributes

DOMの属性値を取得します。

Overview

セレクタでDOMを指定して、取得する属性名を指定します。

HTML,BODY および IDセレクタに対応します。

HTML,BODY以外の値が指定された場合はIDセレクタとします。#は不要です。

属性名でclass を指定した場合のみObjectを返します。その他の場合Stringを返します。

URI dom-attr://{target}/{attr}
Path

nuxt.config.ts に登録されたPrefixの後に続くパスを記載します。

Example dom-attr://bd-content/class

Html attrs

vue
<template>
 <ViewState
  v-slot="theme"
  src="dom-attr://html/data-bs-theme"
 >
  <b-button
   v-if="theme.data == 'dark'"
   color="primary"
   @click="theme.update('light')"
  >
   Set to [Light]
  </b-button>
  <b-button
   v-else
   color="secondary"
   @click="theme.update('dark')"
  >
   Set to [Dark]
  </b-button>
 </ViewState>
</template>

Body attrs

vue
<template>
 <ViewState
  v-slot="theme"
  src="dom-attr://html/data-bs-theme"
 >
  <b-button
   v-if="theme.data == 'dark'"
   color="primary"
   @click="theme.update('light')"
  >
   Set to [Light]
  </b-button>
  <b-button
   v-else
   color="secondary"
   @click="theme.update('dark')"
  >
   Set to [Dark]
  </b-button>
 </ViewState>
</template>

ID class

{}
vue
<template>
 <ViewState
  v-slot="theme"
  src="dom-attr://content/class"
 >
  {{ theme.data }}
  {{ theme.data['text-success'] }}
  <b-button
   v-if="theme.data['text-success']"
   color="primary"
   @click="theme.set('text-success', false)"
  >
   Remove [success]
  </b-button>
  <b-button
   v-else
   color="secondary"
   @click="theme.set('text-success', true)"
  >
   Add [success]
  </b-button>
 </ViewState>
</template>