Q&A
Closed
Vue(Nuxt)でデータベースからきた日付データをフォーマットしたい。
computed {
editdate: function (post_at) {
post_at =post_at + "だよ";
alert(post_at);
},
},
ページを開いたときに自動で関数を実行して、フォーマットするにはどうしたらいいのでしょうか？
ボタンを押して関数実行などのやり方はわかるのですが...
ページを開いたときに自動で関数を実行して、フォーマットするにはどうしたらいいのでしょうか？
Vue.jsの場合、created、mounted
Nuxt.jsの場合、asyncData、fetch
あたりで処理できると思います。
以下、サンプル
<template>
<div>
<h2>{{ editdate }}</h2>
</div>
</template>
<script>
export default {
data : function(){
return {
editdate : null
}
},
created : async function(){
// 日時取得
const res = await this.axios.get('https://worldtimeapi.org/api/timezone/Asia/Tokyo');
const datetime = new Date(res.data.datetime);
// 日時をYYYY/MM/DDに整形
const yyyy = datetime.getFullYear();
const mm = ('00' + (datetime.getMonth()+1)).slice(-2);
const dd = ('00' + datetime.getDate()).slice(-2);
const yyyymmdd = [yyyy, mm, dd].join('/');
this.editdate = yyyymmdd;
},
}
</script>
<template>
<div>
<h2>{{ editdate }}</h2>
</div>
</template>
<script>
export default {
data : function(){
return {
editdate : null
}
},
async asyncData({ $axios }) {
// 日時取得
const timezone = await $axios.$get(`https://worldtimeapi.org/api/timezone/Asia/Tokyo`)
const datetime = new Date(timezone.datetime);
// 日時をYYYY/MM/DDに整形
const yyyy = datetime.getFullYear();
const mm = ('00' + (datetime.getMonth()+1)).slice(-2);
const dd = ('00' + datetime.getDate()).slice(-2);
const yyyymmdd = [yyyy, mm, dd].join('/');
return { editdate : yyyymmdd };
},
}
</script>
@coret
Questioner