0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VueのForm入力はこれでよかったのか!!!

Last updated at Posted at 2023-08-14

背景

以前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のパワーを出せるようにしたいと思う。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?