Vuetify Basic

by Roland Doda

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app dark>
  <v-layout row wrap>
  <v-flex xs8 offset-xs2 v-for="question in questions" :key="question.id">
    <v-select
      :label="question.question"
      :items="question.answers"
      item-value="correct"
      item-text="text"
      @change="checkAnswer"
      single-line
    ></v-select>
  </v-flex>
  </v-layout>
        
</v-app>
</div>

JavaScript

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  methods: {
		checkAnswer(correct) {
     correct ? alert('Correct Answer') : alert('Wrong Answer')
    }
  },
  data: {
		questions: [
     { 
      id: 1,
     	question: 'The Last Name of Cristiano is:',
      answers: [ 
      	{ text: 'Ronaldo', correct: true},
        { text: 'Rivaldo', correct: false },
        { text: 'Messi', correct: false }
      ]
     },
     {
     	id: 2,
      question: 'Vue.js, is a:',
      answers: [
      	{ text: 'Javscript Framework', correct: true },
        { text: 'Php Framework', correct: false },
        { text: 'Python Framework', correct: false }
      ]
     }
    ]
  }
});