UserProfile.vue

<template>
  <v-flex xs12>
    <v-card class="elevation-2 pa-3" flat>
      <v-card-text >
      <v-flex xs12 >
       <UserAvatar :user="user" />
       </v-flex>
   <v-container grid-list-xl fluid>
    <v-form @submit.prevent="update()" enctype="multipart/form-data" v-model="valid">

     <v-spacer></v-spacer>
    <v-layout row wrap>

    <v-flex xs12 sm6>
       <v-text-field
       name="name"
       label="Nome"
       type="text"
       v-model="user.name"
       :error-messages="errors.name"
       outline
       >
     </v-text-field>
   </v-flex>

     <v-flex xs12 sm6>
       <v-text-field
       name="lastname"
       label="Sobre Nome"
       type="text"
       v-model="user.lastname"
       :error-messages="errors.lastname"
       outline
       >
     </v-text-field>
   </v-flex>

   <EstadosCidades :user="user" />

     <v-flex xs12 sm10>
       <v-text-field
       name="logradouro"
       label="Logradouro*"
       :rules="logradouroRules"
       type="text"
       v-model="user.logradouro"
       :error-messages="errors.logradouro"
       outline
       required
       >
     </v-text-field>

   </v-flex>
      <v-flex xs12 sm2>
       <v-text-field
       name="numero"
       label="Número"
       type="number"
       v-model="user.numero"
       :error-messages="errors.numero"
       outline
       >
     </v-text-field>
   </v-flex>

  <v-flex xs12 sm9>
       <v-text-field
       name="bairro"
       label="Bairro"
       type="text"
       v-model="user.bairro"
       outline
       >
     </v-text-field>
</v-flex>

  <v-flex xs12 sm3>
       <v-text-field
       name="cep"
       label="CEP"
       type="text"
       mask="#####-###"
       v-model="user.cep"
       outline
       >
     </v-text-field>
</v-flex>

  <v-flex xs12 sm9>
       <v-text-field
       name="complemento"
       label="Complemento"
       type="text"
       v-model="user.complemento"
       outline
       >
     </v-text-field>
</v-flex>

    <v-flex xs12 sm3>
       <v-text-field
       name="birth"
       label="Data de Nascimento*"
       type="date"
       v-model="user.birth"
       :error-messages="errors.birth"
       outline
       >
     </v-text-field>
   </v-flex>

     <v-flex xs12 sm3>
       <v-text-field
       name="phone"
       label="Telefone*"
       :rules="celRules"
       mask="(##) # ####-####"
       type="text"
       v-model="user.phone"
       :error-messages="errors.phone"
       outline
       required
       >
     </v-text-field>
   </v-flex>

       <v-flex xs12 sm3>
       <v-text-field
       name="cpf"
       label="CPF*"
       mask="###.###.###-##"
       :rules="cpfRules"
       type="text"
       v-model="user.cpf"
       :error-messages="errors.cpf"
       outline
       required
       >
     </v-text-field>
   </v-flex>

   <v-flex xs12 sm3>
    <v-text-field
    append-icon="email"
    name="email"
    label="Email"
    type="text"
    v-model="user.email"
    :error-messages="errors.email"
    outline>
  </v-text-field>
</v-flex>

 <v-flex xs12 sm9>
        <v-select
          name="occupation"
          v-model="selectedObjects"
          :items="especialidades"
          item-text="name"
          item-value="value"
          label="Profissões"
          multiple
          chips
          hint="Selecione suas especialidades"
          persistent-hint
        ></v-select>
  </v-flex>

<v-dialog v-model="openPassw" width="800px" persistent>
<UserPassword
v-if="openPassw"
@closePassw="openPassw = false"
:user="user"
:errors="errors"
@savePassw="update"
>
</UserPassword>
</v-dialog>
<v-flex  xs12 sm6>

</v-flex>

<v-spacer></v-spacer>
<v-flex>
  <v-btn round color="error" @click="openPassw = true">Mudar Senha</v-btn>
  <v-btn round color="primary" type="submit" :loading="loading">Atualizar</v-btn>
</v-flex>

</v-layout>
</v-form>
</v-container>

</v-card-text>

</v-card>
</v-flex>

</template>

<script>
import UserPassword from './UserPassword';
//import UserOcupation from './partials/UserOcupation';
import EstadosCidades from './EstadosCidades';
import UserAvatar from './UserAvatar';
import { URL_BASE } from '../../../configs/configs';

export default {
  data: () => ({
    // regras de validações no formulário
    valid: true,
    logradouroRules: [
      v => !!v || 'Logradouro obrigatório'
    ],
    celRules: [
      v => !!v || 'Telefone obrigatório',
      v => (v && v.length <= 11) || 'O numero deve ter 11 caracteres'
    ],

    cpfRules: [
      v => !!v || 'cpf obrigatório',
      v => (v && v.length <= 11) || 'Por favor, digite um cpf válido'
    ],
    openPassw: false,
    loading: false,
    user: {
      name: '',
      lastname: '',
      email: '',
      birth: '',
      phone: '',
      cpf: '',
      estado: '',
      cidade: '',
      occupation:[]
    },
      especialidades: [
      {id: 1, name:'Profissional de Enfermagem', value:'Profissional de Enfermagem'},
      {id: 2, name:'Dentista', value:'Dentista'},
      {id: 3, name:'Ortopetista', value:'Ortopetista'},
      {id: 4, name:'Ginecologista', value:'Ginecologista'}],
    errors: {},
    selectedObjects:[]
  }),

    watch: {
    selectedObjects(newValues) {
      this.user.occupation = newValues.map(obj => obj.id);
       console.log(newValues)
    }
  },

  created() {
    axios.get(`${URL_BASE}profile`, this.$data.user)
      .then(response => {
        this.user = response.data;
        console.log(response.data)
      })
      .catch(error => {
        this.errors = error.response.data.errors;
        this.$snotify.error('Falha...', 'Erro');
        this.loading = false;
      });
  },

  methods: {

    update() {
      this.loading = true;
      axios.put(`${URL_BASE}profile`, this.user)
        .then(response => {
          this.$store.commit('updateUser', response.data);

          // localStorage.setItem('user', JSON.stringify(response.data));
          this.$snotify.success('Registro alterado com sucesso!', 'Tudo ok!');
          this.openPassw = false;
          this.loading = false;
          this.$router.push({ name: 'dashboard' });
        })
        .catch(error => {
          this.loading = false;
          this.errors = error.response.data.errors;
          // this.$snotify.error('Falha...', 'Erro')
          
        });
    }

  },

  components: {
    UserPassword,
    UserAvatar,
    EstadosCidades,
    //UserOcupation
  }

};

</script>
<style scoped lang="css">
  #login {
    height: 50%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 0;
  }
 </style>