vuetify autocomplete dg-works

_vuetify-autocomplete-dg-works.markdown

vuetify autocomplete dg-works

A Pen by dgleba on CodePen.

License.

index.html

<div id="vue-instance">
  <v-app>
  <v-form>
    <v-container>
    <div v-if="state.interval === 'monthly'">
      Number: <v-autocomplete v-model="selected" v-bind:items="monthlyItems" light autocomplete>
      </v-autocomplete>
    </div>
       Selected: {{selected}}
    </v-container>
    </v-form>

  </v-app>
</div>

script.js

var vm = new Vue({
  el: '#vue-instance',
  data: {
    selected: null,
    state: {
      monthly: null,
      weekly: null,
      interval: 'monthly'
    },
    monthlyItems: _.range(1, 39),
    weeklyItems: _.range(1, 8)
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.0/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');

div {
  /*   margin: 10px; */
  padding: 3px;
};

styles

<link href="https://unpkg.com/vuetify@1.5.0/dist/vuetify.min.css" rel="stylesheet" />