[Vuejs]-How to submit a prefilled form using vue

by

0👍

✅

First, setting both a v-model and a :value is conflicting, since (according to the Vue docs) v-model is just syntactical sugar on top of :value.

Rather, I take the approach of setting an intermediary data value. I’m only going to demonstrate one such field to simplify the example. In this case, it’s the proposedClientEmail…

<template>
  <b-form @submit.prevent="updateUsuario" class="pl-4">
    <b-form-group id="input-group-1" label="User ID:" label-for="input-1">
      <b-form-input
        id="input-1"  
        :v-model="proposedClientEmail"
        required           
      >
      </b-form-input>
    </b-form-group>

    <b-button block pill type="submit" variant="success"
      >Actualiza tus datos</b-button
    >
  </b-form>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "UpdateClient", 
  data() {
    return {
      currentUser: {},
      proposedClientEmail: ""
    };
  },
  methods: {
    updateUsuario() {
      this.$store.dispatch("updateUsuario", [{
        client_e_mail: this.proposedClientEmail
      }, "clients"])
    },
  },
  created() {
    if (localStorage.getItem("user")) {
      try {
        this.currentUser = JSON.parse(localStorage.getItem("user"));
        this.proposedClientEmail = this.currentUser.clientEmail
      } catch (e) {
        localStorage.removeItem("user");
      }
    }
  }
};
</script>

Leave a comment