Quasar v0.15 - Material theme

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

by Theara Yuom

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/[email protected]/dist/umd/quasar.mat.min.css">
<script src="https://unpkg.com/[email protected]/dist/umd/quasar.mat.umd.min.js"></script>

<div id="q-app">
  <div class="q-ma-md">
    Running Quasar v{{ version }}
  </div>
  <q-field :error="error" :error-label="errorLabel">
    <q-input v-model="field" stack-label="Field is required" />
  </q-field>

  <br/>
  <div>^going to top when no error^</div>
  <div>example <a href="https://vuetifyjs.com/en/components/text-fields#example-custom-validation">vuetify form validation</a></div>
</div>

JavaScript

new Vue({
  el: '#q-app',
  data: function() {
    return {
      version: Quasar.version,
      field: '',
      error: false,
      errorLabel: ''
    }
  },
  watch:{
   field(val){
  	      if(val.length == 0){
  	        this.errorLabel = 'Required'
  	        this.error = true
  	      }else if(val.length > 5){
  	        this.errorLabel = 'Max 5 digits'
  	        this.error = true
  	      }else{
  	        this.errorLabel = ''
  	        this.error = false
  	      }
  	    }
  },
  methods: {
    notify: function() {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
  }
})