ここしばらくReactとTypeScriptでお仕事をしていたので、
Vue.jsの再学習という意味でメモを残していきます。
tl;dr
フォームの編集状態と送信するリクエストの状態に差分があるときは状態を1つにして、考慮するべき入力状態を1つに保つようにしよう。
https://codesandbox.io/s/form-itmqy
課題感
よく感じる課題感
サーバーから取得した状態を変更してサーバーへ送り返す際に、
日付のフォーマットが違うようなケースが稀によくある。
例えば、以下のような状態があったとする。
1. 日付を入力するフォームがある
2. 送信ボタンを押すとAPIを叩いて日付を登録する
今回はこの2つの手順だけに絞ったフォームを作る
1. 日付を入力するフォームがある
イメージしてもらうにはこんな感じのをみてもらえばいいと思う。
input type="date" の 日付フォーマットは YYYY-MM-DD なので、
入力すると 例えば 1234-10-03 と表示されればOK。
<template>
<div id="app">
<h1>see App.vue</h1>
<input type="date" :value="入力された日付" @input="入力された内容で日付を更新する">
<p>{{入力された日付}}</p>
</div>
</template>
<script>
export default {
data: function() {
return {
入力された日付: ""
};
},
methods: {
入力された内容で日付を更新する(ev) {
console.log(ev.target.value);
this.入力された日付 = ev.target.value;
}
}
};
</script>
2. 送信ボタンを押すとAPIを叩いて日付を登録する
送信ボタンを押したときにリクエストを送る(ような)実装をしていく。
手順としては以下のような実装の順序になる
(1) 送信ボタン用のmethodを作る
(2) 送信ボタンのHTMLを書いて(1)で作ったmethodを@click にわたす
(3) 押されたときに実行したい処理を書く APIのIFに沿うように入力された日付をフォーマット
(4) フォーマットされた文字をリクエスト
<template>
<div id="app">
<input type="date" :value="入力された日付" @input="updateDate">
<p>{{入力された日付}}</p>
<!-- (2) 送信ボタンのHTMLを書いて(1)で作ったmethodを@click にわたす -->
<button @click="postDate">send</button>
</div>
</template>
<script>
// (3) 押されたときに実行したい処理を書く APIのIFに沿うように入力された日付をフォーマット
import moment from "moment";
const 日付をフォーマット = 渡した日付 => {
const date = moment(渡した日付, "YYYY-MM-DD");
return date.isValid() ? date.format("YYYY/MM/DD") : "";
};
const ajax = {
post(data) {
console.log("リクエスト内容は", data);
}
};
export default {
name: "App",
data: function() {
return {
入力された日付: ""
};
},
methods: {
updateDate(ev) {
console.log(ev.target.value);
this.入力された日付 = ev.target.value;
},
postDate() { // (1) 送信ボタン用のmethodを作る
// (4) フォーマットされた文字をリクエスト
const フォーマットされた日付 = 日付をフォーマット(this.入力された日付);
if (!フォーマットされた日付) {
return;
}
ajax.post({
date: フォーマットされた日付
});
}
}
};
</script>
実際にフォームがさくっとできました。
今回書いたコードは こちらに上がっています => https://codesandbox.io/s/form-itmqy
まとめ
今回、Vue.jsの状態とサーバーへリクエストするときの状態が異なるフォーマットにしたときに複数の状態を保持するのではなく、
変更する状態は一つに、サーバーへリクエストするときに初めてフォーマットすると、
考慮するべき状態が少なく済むので複雑なロジックを組むときもシンプルに実装を保つことができます。