dev-audioprocessing/pages/setting/editaccount.vue

<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-md-10 col-sm-8">
        <h4 class="fw-bold text-center pt-5 me-5"><span class="float-start " style="cursor: pointer" @click="this.$router.go(-1)"><i class="fa-solid fa-arrow-left-long"></i></span>
          {{ t("Edit Account") }}</h4>
        <div class="row justify-content-center">
          <div class="col-11 col-md-8">
            <form @submit.prevent="saveUser">
              <div class="row pt-5">
                <div class="col-12">
                  <label class="text-muted ">{{t("First Name")}} </label>
                  <input type="text" v-model="form.first_name" class="form-control" placeholder="First Name" />
                  <div class="invalid-feedback d-block" v-if="errors.first_name">{{errors.first_name[0]}}</div>
                </div>
              </div>
              <div class="row pt-3">
                <div class="col-12">
                  <label class="text-muted ">{{t("Surname")}} </label>
                  <input type="text" v-model="form.surname" class="form-control" placeholder="Surname" />
                  <div class="invalid-feedback d-block" v-if="errors.surname">{{errors.surname[0]}}</div>
                </div>
              </div>
              <div class="row pt-3">
                <div class="col-12">
                  <label class="text-muted ">{{t("Email")}} </label>
                  <input type="email" v-model="form.email" class="form-control" placeholder="Email" />
                  <div class="invalid-feedback d-block" v-if="errors.email">{{errors.email[0]}}</div>

                </div>
              </div>

              <div class="row pt-3">
                <div class="col-12">
                  <label class="text-muted ">{{t("Password")}} </label>
                  <input type="password" v-model="form.password" class="form-control" placeholder="Password" />
                  <div class="invalid-feedback d-block" v-if="errors.password">{{errors.password[0]}}</div>
                </div>
              </div>
              <div class="row pt-5 ">
                <div class="col-12 text-center">
                  <button type="submit" class="btn text-white fs-5  col-12 fw-bold py-2 " style="background-color: #e9c046">{{t("Save Changes")}}  <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
                    <span class="sr-only">{{t("Loading...")}} </span>
                  </div></button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Index from "~/pages/index.vue";
import {mapState,mapActions} from "pinia";
import {useUserStore} from "~/stores/user";
export default {
  name:'EditAccount',
  components: {Index},
  computed:{
    ...mapState(useUserStore,['user'])
  },
  setup(){
    const { t } = useI18n()
    const localePath = useLocalePath()
    return {t,localePath}
  },
  mounted() {
    console.log(this.user)
  this.form.first_name=this.user.first_name;
  this.form.email=this.user.email;
  this.form.surname=this.user.surname;
    },
  data(){
    return {
      loading:false,
      form:{
        first_name:"",
        surname:"",
        email:"email",
        password:""
      },
      errors:[],
    }
  },
  methods:{

    ...mapActions(useUserStore,['updateUser']),
    saveUser(){
      this.loading=true;
      this.$axios.post('/api/account/update',this.form).then(({data})=>{
        this.loading=false;
        if(data.success){
          this.$toast.success(data.message);
          this.updateUser(data.user);
        }
      }).catch((error)=>{
        this.loading=false;
        this.$toast.error('Something wrong while saving...');
        if(error.response.status==422){
          this.errors = error.response.data.errors;
        }
      })
    }
  }
}
</script>

<style>

</style>