Vue.jsでForm要素をコンポーネント化する

やりたいこと

• 新規作成画面と更新画面で<form>要素の内容は同じであることが多いので、コンポーネント化して使いまわしたい。

実装例

ユーザー作成画面

UserCreatorPage.vue

<template>
  <div>
    <user-form v-model="userForm" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import UserForm from "./UserForm.vue";

export default Vue.extend({
  name: "user-creator-page",
  components: { UserForm },
  data() {
    return {
      userForm: {
        firstName: '',
        lastName: ''
      }
    };
  },
});
</script>

ユーザーフォーム

UserForm.vue

<template>
  <form>
    <div class="form-group">
      <label for="last-name">性</label>
      <input type="text" class="form-control" id="last-name" :value="value.lastName" @input="update('lastName', $event.target.value)" />
    </div>
    <div>
      <label for="first-name">名</label>
      <input type="text" class="form-control" id="first-name" :value="value.firstName" @input="update('firstName', $event.target.value)" />
    </div>
  </form>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "user-form",
  props: ['value'],
  methods: {
    update(key: string, value: string) {
      this.value[key] = value
      this.$emit('input', this.value)
    },
  }
});
</script>

参考

• コンポーネントで v-model を使う