背景

以前Vue.jsを持ちいてフォームの送信を行なおうとしたところ、デフォルトの送信を取り消さないと勝手に画面がリフレッシュされてしまうという問題があった。
これの解決のために、

<template>
  <div>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="aa" />
        <input type="submit" value="Submit" @click="handleSubmit" /><br />
    </form> 
    {{ time }}<br />
    {{ text }}<br />
  </div>
</template>

@submit.prevent これを利用することで、強制更新を止めることができたが、ref を利用する場合は、別にFormで加工必要がないことに気が付いた。

改変後

<template>
  <div>
    <input type="text" v-model="aa" />
    <input type="submit" value="Submit" @click="handleSubmit" /><br />
    {{ time }}<br />
    {{ text }}<br />
  </div>
</template>

おまけのスクリプト

js

<script>
import { ref } from 'vue';

export default {
  name: 'TimeView',
  setup() {
    const aa = ref('123');
    const time = ref('取得中');
    const text = ref('未入力');

    function handleSubmit() {
      fetch('http://localhost:3000/api/time', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ text: aa.value }),
      })
        .then((response) => response.json())
        .then((data) => {
          // alert('Submitted: ' + data.time);
          time.value = data.time;
          text.value = data.text;
        })
    }

    return {
      aa,
      handleSubmit,
      time,
      text,
    };
  },
};
</script>

まとめ

Formを利用せずに、clickしたタイミングで、送信してしまえば何も問題がないと分かり、以前の苦労は何だったのかとなってしまった。ほかにもVueの持つパワーを生かし切れていないことは多いと思うので、何とか少しでもVueのパワーを出せるようにしたいと思う。