Vue.js で data や computed の値の一覧を埋め込んでデバッグを楽にする方法
実機テスト中で Vue-Devtools が使えない環境だったり、他の人が作ったVueコンポーネントの構造がどうなっているのか、わけがわからないという状況だったり、たんに開発環境ではHTML自体に埋めておいてすぐに確認したいという場合は、次のタグをさくっとコピペするとデバッグがとても楽になります。
slim または pug 形式になっています。
template(v-if="true")
table(border=1)
caption
| Props
tr(v-for="(value, key) in $props")
th(v-text="key")
td(v-text="value")
table(border=1)
caption
| Variables
tr(v-for="(value, key) in $data")
th(v-text="key")
td(v-text="value")
table(border=1)
caption
| Computed
tr(v-for="(e, key) in _computedWatchers")
th(v-text="key")
td(v-text="e.value")
表示はこんな感じですがもっともっとカオスな状況で効果があります。
See the Pen Vue.js variables simple display by Akira Ikeda (@akicho8) on CodePen.
Author And Source
この問題について(Vue.js で data や computed の値の一覧を埋め込んでデバッグを楽にする方法), 我々は、より多くの情報をここで見つけました https://qiita.com/akicho8/items/9fbe969c35b78a46aa00著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .