blog.yohsuke.me

JSON オブジェクトの中身を v-for で描画する際、シンプルな {{マスタッシュ}} ではなく、render 関数で複雑なプロパティや入れ子を実現する。

参考：描画関数とJSX

axios 内で this で自分を参照できないので self = this とかしていたけど、

Vue.component('TestComponent', {
	template: [
		'<div @click="copyContent">コピーする内容</div>'
	],
	methods: {
		copyContent(e) {
			navigator.clipboard.writeText(e.currentTarget.innerHTML);
		}
	}
})

clipboard.writeText() は Internet Expolorer 非対応

Vue.component('TestComponent', {
	template:[
		'<div>合計は {{ total | digit }} 円です。</div>'
	],
	data: function() {
		return {
			total: "1234567"
		}
	},
	filters: {
		digit: function(a) {
			//与えられたデータが文字列かもしれないので Number() で数値に変換
			return Number(a).toLocaleString();
		}
	}
}

<div>合計は 1,234,567 円です。</div>