Quasar v0.15 - Material theme

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

by smolinari

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.ios.min.css">
<script src="https://unpkg.com/quasar-framework@^0.17.0/dist/umd/quasar.ios.umd.min.js"></script>

<template id="questions-template">
  <div>
    <div v-for="question in questions"> 
      <slot name="text" :text="question.text"></slot>
      <slot :name="question.id" :input="question.input"></slot><br/>
    </div>
  </div>
</template>

<div id="q-app">
  <p class="caption"><strong>{{ title }}</strong></p>
  <questions-component :questions="questions">
    <div slot="text" slot-scope="text">
      {{ text.text }}
    </div>    
    <template v-for="question in questions"
      :slot="question.id" 
      slot-scope="{ input }"
    >
      <q-field :helper="input.help">
        <component v-if="input.type === 'input'"
          is="q-input"
          v-model="input.value">
        </component> 
        <component v-if="input.type === 'select'"
          is="q-select"
          v-model="input.selection"
          :options="input.options">
        </component> 
        <component v-if="input.type === 'multi-select'"
          is="q-select"
          v-model="input.selection"
          multiple
          :options="input.options">
        </component> 
      </q-field><br/>
    </template>        
  </questions-component>
  Response #1: {{ questions[0].input.value }}<br/>
  Response #2: {{ questions[1].input.selection }}<br/>
  Response #3: {{ questions[2].input.selection }}

</div>

JavaScript

Vue.component('questions-component', {
  template: '#questions-template',
  props: {
     questions: {
       type: Array,
       required: true
     }
  }
})

new Vue({
  el: '#q-app',
  data: function () {
    return {
      title: 'Component Framework Survey',
      questions: [
      {
        id: 1,
        text: 'What is your name?',
        input: {
          type: 'input',
          help: 'Enter your name',
          value: ''
        }
      },
      { 
        id: 2,
      	text: 'What is your favorite frontend component framework?',
        input: {
          type: 'select',
          help: 'Pick your favorite framework',
          selection: '',
          options: [
            {
              label: 'Quasar',
              value: '0'
            },
            { 
              label: 'Vuetify',
              value: '1'
            },
            {
              label: 'Buefy',
              value: '2'
            },
            {
              label: 'Vuestrap',
              value: '3'
            },
            {
              label: 'Framework 7',
              value: '4'
            }
          ]
        }
      },
      {  
        id: 3,
      	text: 'What backends do you use?',
        input: {
          type: 'multi-select',
          help: 'Pick your backends',
          selection: [],
          options: [
            {
              label: 'Node with Express',
              value: '0'
            },
            { 
              label: 'Node with another Framework',
              value: '1'
            },
            {
              label: 'PHP with Laravel',
              value: '2'
            },
            {
              label: 'Other',
              value: '99'
            }
          ]
        }
      }]
    }
  },
  methods: {
  	notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
	}
})