cssd-back/resources/js/vue/views/MyInfo.vue

<template>
  <v-form>
    <v-container grid-list-xs fluid>
      <material-card
        color="black"
        title="My Info">
        <v-layout align-center justify-center wrap class="px-5 my-3">
          <v-flex xs12 sm4 md4>
            <v-text-field
              name="username"
              label="User Name"
              color="black"
              v-model="username"
              id="id1"
              class="pa-2"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 sm4 md4>
            <v-select
              :items="items"
              label="Gender"
              name="gender"
              v-model="gender"
              single-line
              id="id3"
              class="pa-2"
              color="black">
            </v-select>
          </v-flex>
          <v-flex xs12 sm4 md4>
            <v-text-field
              name="cellnumber"
              label="Cell Number"
              v-model="cellnumber"
              color="black"
              class="pa-2"
              id="id2"
            ></v-text-field>
          </v-flex>
        </v-layout>
        <v-layout align-center justify-center wrap class="px-5 mb-3">
          <v-flex xs12 sm4 md4>
            <v-text-field
              name="emailaddress"
              label="Email Address"
              v-model="emailaddress"
              id="id4"
              class="px-2"
              color="black"
              style="padding-top:75px"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 sm8 md8>
            <v-textarea
              color="black"
              v-model="address"
              class="pa-2"
              name="address">
              <template v-slot:label>
                <div>
                  Address
                </div>
              </template>
            </v-textarea>
          </v-flex>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
              <span class="white--text">SAVE</span>
            </v-btn>
          </v-flex>
          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
            <router-link to="/">
              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                <v-icon class="black--text">keyboard_arrow_left</v-icon>
                <span class="black--text">Back</span>
              </v-btn>
            </router-link>
          </v-flex>
        </v-layout>
      </material-card>
    </v-container>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      username:'',
      gender:'',
      cellnumber:'',
      emailaddress:'',
      address:'',

      items: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4'
      ],
    }
      // const Info = Object.freeze({
      //   username:'',
      //   cellnumber:'',
      //   emailaddress:'',
      //   address:''
      //   gender:0
      // })
      // return {
      //   InfoForm : Object.assign({} ,Info),
      //   Info
      // }
  }
}
</script>

<style lang="css" scoped>
</style>