Vuetify Basic

by alexisgt01

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.css">
<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>
    <v-form v-model="formValidation" ref="form" lazy-validation>

      <v-text-field :rules="[nbRules, requiredRules]" outlined v-model="name" label="Nom du ticket" required></v-text-field>
      

      <v-text-field :rules="nbRules" outlined v-model="name" label="Nom du ticket" required></v-text-field>
    
    </v-form>
  </v-app>
</div>

JavaScript

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  data: () => ({
    name: '',
    requiredRules: [
      v => !!v || 'Le champs est obligatoire',
    ],
    nbRules: [
      v => v.length <= 10 || 'Name must be less than 10 characters',
    ],
    formValidation: false,

  }),
});