form_example.vue

<!-- UserForm -->

<template>
  <form method="POST" action="https://api.com/users" @submit.prevent="handlerSubmit">
    <div class="control">
      <label for="user_name">Name:</label>
      <input type="text" name="name" id="user_name" v-model="model.name">
    </div>
    <div class="control">
      <label for="user_email">Email:</label>
      <input type="text" name="email" id="user_email" v-model="model.email">
    </div>
    <div class="control">
      <label for="user_password">Password:</label>
      <input type="text" name="password" id="user_password" v-model="model.password">
    </div>
  </form>
</template>

<script>
export default {
  name: 'UserForm',
  props: {
    user: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      model: {},
    };
  },
  methods: {
    handlerSubmit() {
      this.$emit('submit', this.model);
    },
  },
  watch: {
    user(newData) {
      this.model = newData;
    },
  },
};
</script>

<!-- implementações do UserForm -->

<!-- criação de usuário -->

<template>
  <UserForm :user="user" @submit="create" />
</template>

<script>
import UserForm from '@/components/user/form';

export default {
  name: 'UserCreate',
  components: {
    UserForm,
  },
  data() {
    return {
      user: {},
    };
  },
  methods: mapActions({
    create: 'user/create',
  }),
};
</script>


<!-- atualização de usuário -->

<template>
  <UserForm :user="user" @submit="update" />
</template>

<script>
import { mapGetters } from 'vuex';
import UserForm from '@/components/user/form';

export default {
  name: 'UserUpdate',
  components: {
    UserForm,
  },
  computed: mapGetters({
    user: 'user/get',
  }),
  methods: mapActions({
    update: 'user/update',
  }),
};
</script>