SIerだけど技術やりたいブログ

6年目のSIerのブログです

Vuejs利用時に <button type="reset"> は使わないほうがいい

button type="reset"とは?

HTMLのButtonのひとつで、Formを自動でクリアしてくれるやつ。
button 要素 - HTML | MDN

<!doctype html>
<html>
  <body>
    <form>
      <input type="text" placeholder="username" />
      <input type="password" placeholder="password" />
      <button type="reset">reset</button>
    </form>
  </body>
</html>

resetボタンをクリックするとFormが自動でクリアされて地味にうれしい。

f:id:kimulla:20180108184041g:plain

Vuejsと併用すると…

resetボタン押下時に見ため上はクリアされたようにみえるけど、Vuejsで管理しているdataプロパティの値はクリアされない。

<template>
  <form @submit.prevent="save">
    <p>
      <input type="text" v-model="text" />
    </p>
    <p>
      <textarea v-model="textarea" />
    </p>
    <p>
      <input type="checkbox" v-model="checked" />
    </p>
    <p>
      <input type="radio" id="one" value="one" v-model="radio" />
      <input type="radio" id="two" value="two" v-model="radio" />
    </p>
    <p>
      <select v-model="select">
        <option disabled value="" selected>please select</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
    </p>
    <button type="reset">reset</button>
    <button type="submit">save</button>
  </form>
</template>

<script>
export default {
  name: 'Form',
  data () {
    return {
      text: '',
      checked: false,
      textarea: '',
      radio: '',
      select: ''
    }
  },
  methods: {
    save: function () {
      console.log(`save text: ${this.text} textarea: ${this.textarea} checked: ${this.checked} radio: ${this.radio} select: ${this.select}`)
    }
  }
}
</script>

resetボタンを押したあとも、dataプロパティの値がそのまま残っている。

f:id:kimulla:20180108184615g:plain

解決方法

button type="reset"を利用しない。
自分でハンドラを設定して、dataプロパティをリセットする。

<template>
...
    <button @click="clear" type="button">reset</button>
...
</template>

<script>
...
methods: {
    ...
  clear: function () {
    this.text = ''
    this.checked = false
    this.textarea = ''
    this.radio = ''
    this.select = ''
  }
}
</script>

resetボタンを押したときに、dataプロパティもリセットされている。

f:id:kimulla:20180108190142g:plain

dataプロパティの初期値を丸ごと設定する場合は、以下のようにも書けるらしい。

<script>
...
// ここを再利用する
data () {
  return {
    text: '',
    checked: false,
    textarea: '',
    radio: '',
    select: ''
  }
},
methods: {
    ...
    clear: function () {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

stackoverflow.com

ついでに

Vuetifyというフレームワークを利用していた場合、

こんな感じで組み込みのFormコンポーネントをrefで参照してreset()メソッドを呼び出せば、nullで初期化してくれる。
https://github.com/vuetifyjs/vuetify/issues/2752

<template>
...
      <v-form ref="form">
...
</template>

<script>
...
    clear: function () {
      this.$refs.form.reset()
    }
...
</script>

いやぁー、リッチなUIフレームワークって、本当(ほんっとう)に素晴らしいものですね。