Quasar: Grid Form

You can use it to submit Github tickets for Quasar v0.15.

HTML

<link rel="stylesheet" href="https://unpkg.com/quasar-extras@latest/material-icons/material-icons.css">
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/quasar-framework@^0.17.0/dist/umd/quasar.mat.min.css">
<script src="https://unpkg.com/quasar-framework@^0.17.0/dist/umd/quasar.mat.umd.min.js"></script>

<div id="q-app">
  <div class="q-ma-md">
    Fork and make your own!
    Do NOT use self-closing tags here on jsFiddle.
  </div>
  <div class="q-ma-md">
    <form>
      <div class="row gutter-md">
        <div class="col-sm-12 col-md-6">
          <q-input v-model="text" stack-label="Some Text Field"></q-input>
        </div>
        <div class="col-sm-12 col-md-6">
          <q-input v-model="text2" stack-label="Some Other Text Field"></q-input>
        </div>  
        <div class="col-sm-12 col-md-6">
          <q-input v-model="text3" stack-label="Another Text Field"></q-input>
        </div>
        <div class="col-sm-12 col-md-6">
        <q-select stack-label="Pick something"
>
        <q-option-group
    color="secondary"
    inline
    type="checkbox"
    v-model="group"
    :options="[
      { label: 'Option 1', value: 'op1' },
      { label: 'Option 2', value: 'op2' },
    ]"
  />
  </q-field>
        </div>
        <div class="col-sm-12 col-md-6">
          <q-datetime v-model="date" type="date" stack-label="Some Date Field"></q-datetime>
        </div>
      </div>
    </form> 
  </div>
</div>

JavaScript

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      text: '',
      text2: '',
      text3: '',
      date: '',
      group:[]
    }
  },
  methods: {
  	notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
	}
})