title: Vue 3 edit profile
body: <p>Hello guys i need some help,
  I want to create a component where people can edit their profile, after registration/login.
  I havent found any tutorial how to send new data back to your backend. I am newbie in vue, so i would appriciate any help. This is code just from few tutorials i have found, if u needed more detailes let me know. I will be really greatful for any help.
  This is my code :
  EditProfile.Vue</p>
  <pre><code>    &lt;template&gt;
    &lt;div class=&quot;col-md-12&quot;&gt;
      &lt;div class=&quot;card card-container&quot;&gt;
        &lt;img
          id=&quot;profile-img&quot;
          src=&quot;//ssl.gstatic.com/accounts/ui/avatar_2x.png&quot;
          class=&quot;profile-img-card&quot;
        /&gt;
        &lt;Form @submit=&quot;handleRegister&quot; :validation-schema=&quot;schema&quot;&gt;
          &lt;div v-if=&quot;!successful&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;username&quot;&gt;New username&lt;/label&gt;
              &lt;Field name=&quot;username&quot; value={{content.username}} type=&quot;text&quot; class=&quot;form-control&quot; /&gt;
              &lt;ErrorMessage name=&quot;username&quot; class=&quot;error-feedback&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;email&quot;&gt;New email&lt;/label&gt;
              &lt;Field name=&quot;email&quot; value={{content.email}} type=&quot;email&quot; class=&quot;form-control&quot; /&gt;
              &lt;ErrorMessage name=&quot;email&quot; class=&quot;error-feedback&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;password&quot;&gt;New Name &amp; Surname&lt;/label&gt;
              &lt;Field name=&quot;password&quot; value=&quot;{{content.first_name}} {{content.last_name}}&quot; type=&quot;text&quot; class=&quot;form-control&quot; /&gt;
              &lt;ErrorMessage name=&quot;password&quot; class=&quot;error-feedback&quot; /&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;button class=&quot;btn btn-primary btn-block&quot; :disabled=&quot;loading&quot;&gt;
                &lt;span
                  v-show=&quot;loading&quot;
                  class=&quot;spinner-border spinner-border-sm&quot;
                &gt;&lt;/span&gt;
                Edit Profile
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Form&gt;
  
        &lt;div
          v-if=&quot;message&quot;
          class=&quot;alert&quot;
          :class=&quot;successful ? 'alert-success' : 'alert-danger'&quot;
        &gt;
          {{ message }}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Form, Field, ErrorMessage } from &quot;vee-validate&quot;;
  import * as yup from &quot;yup&quot;;
  import UserInfo from &quot;../services/user-info.js&quot;;
  
  export default {
    name: &quot;EditProfile&quot;,
    components: {
      Form,
      Field,
      ErrorMessage,
    },
    data() {
      const schema = yup.object().shape({
        username: yup
          .string()
          .required(&quot;Username is required!&quot;)
          .min(3, &quot;Must be at least 3 characters!&quot;)
          .max(20, &quot;Must be maximum 20 characters!&quot;),
        email: yup
          .string()
          .required(&quot;Email is required!&quot;)
          .email(&quot;Email is invalid!&quot;)
          .max(50, &quot;Must be maximum 50 characters!&quot;),
        password: yup
          .string()
          .required(&quot;Password is required!&quot;)
          .min(6, &quot;Must be at least 6 characters!&quot;)
          .max(40, &quot;Must be maximum 40 characters!&quot;),
      });
  
      return {
        successful: false,
        loading: false,
        message: &quot;&quot;,
        schema,
      };
    },
    computed: {
      loggedIn() {
        return this.$store.state.auth.status.loggedIn;
      },
    },
    mounted() {
      if (this.loggedIn) {
        this.$router.push(&quot;/EditProfile&quot;);
      }
      UserInfo.getUserInfo().then(
        (response) =&gt; {
          this.content = response.data;
        },
        (error) =&gt; {
          this.content =
            (error.response &amp;&amp;
              error.response.data &amp;&amp;
              error.response.data.message) ||
            error.message ||
            error.toString();
        }
      );
    },
    methods: {
      handleRegister(user) {
        this.message = &quot;&quot;;
        this.successful = false;
        this.loading = true;
  
        this.$store.dispatch(&quot;auth/register&quot;, user).then(
          (data) =&gt; {
            if (data.id) {
              this.message = &quot;Profile edited&quot;;
            }
           
            this.successful = true;
            this.loading = false;
          },
          (error) =&gt; {
            this.message = 
              (error.response &amp;&amp;
                error.response.data &amp;&amp;
                error.response.data.message) ||
              error.message ||
              error.toString();
            this.successful = false;
            this.loading = false;
          }
        );
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>This is my user-info.js</p>
  <pre><code>import axios from 'axios';
  import authHeader from './auth-header';
  
  const API_URL = 'http://localhost:8082/api/auth/';
  
  class UserInfo {
      getUserInfo() {
          return axios.get(API_URL + 'user/', { headers: authHeader() });
        }
  }
  
  export default new UserInfo();
  </code></pre>