Skip to content
Snippets Groups Projects
FormExperience.vue 2.02 KiB
<template>
  <div class="q-pa-md">

    <p>Please provide some information about your studies and work experience</p>
    <div class="row">
      <div class="col-12 col-md">
        <q-form
          class="q-py-md col q-gutter-md"
          style="max-width: 80vw; width: 700px"
        >
          <div class="row q-pt-md">
            <div class="col-12 col-md-2">
              <p class=" text-caption">Education</p>
            </div>
            <div class="col-12 col-md">
              <div class="row q-gutter-md">
                <q-editor
                  v-model="education"
                  style="min-height: 10rem; width: 100%"
                />
              </div>
            </div>
          </div>

          <div class="row q-pt-md">
            <div class="col-12 col-md-2">
              <p class=" text-caption">Work experience</p>
            </div>
            <div class="col-12 col-md">
              <div class="row q-gutter-md">
                <q-markup-table style="width:500px; max-width: 80vw;">
                  <tr>
                    <td style="width: 20%;">Year</td>
                    <td style="width: 40%">Role</td>
                    <td style="width: 40%">Company</td>
                  </tr>
                  <tr>
                    <td>
                      <q-select
                        :options="years"
                        value="year"
                      ></q-select>
                    </td>
                  </tr>
                </q-markup-table>
              </div>
            </div>
          </div>

        </q-form>
      </div>
    </div>

    <pre>
    Education

    Work experience

    Role Year Company Occupation

    Languages
</pre>
  </div>
</template>
<script>
export default {
  // name: 'ComponentName',
  data () {
    return {
      year: '2019',
      education: "",
      work_experience: ""
    };
  },
  computed: {
    years () {
      const _y = []
      for (var i = 1959; i < 2059; i++)
        _y.push(`${i}`)
      return y;
    }
  }
}
</script>

<style>
</style>