vuejsでcancelボタンを実装する

December 31, 2020

commit history
  1. 2020/11/22 16:07:56 ca5e51a
headline

codesandboxの実装例

実際のコード

<template>
  <div>
    <input v-model="inputValue"/>
    <button type="submit" @click="savedValue = inputValue">save</button>
    <button type="submit" @click="inputValue = savedValue">cancel</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      savedValue: "saved",
      inputValue: "",
    };
  },
  mounted(){
    this.inputValue = this.savedValue
  }
};
</script>

欠点

  • 2つの値を使用するのでコードを見た時に伝わりづらい気がした

利点

  • あまり難しいことをしていないのでvueをあまりわからない人でも伝わると思う

他の実装の例

https://shimablogs.com/vue-form-edit-cancel


contact