vue material autocomplete won't select, vuetify works, but css is off a little. 2019-02-07

_vue-material-vuetify.markdown

vue material vuetify

A Pen by dgleba on CodePen.

License.

index.html

<div id="app">
  <md-toolbar class="md-primary">
    <h1 class="md-title">Vue Material</h1>
  </md-toolbar>
  
  <md-content>
    Your content here
  </md-content>
  
    <md-field>
      <label>Initial Value</label>
      <md-input v-model="state.initial"></md-input>
    </md-field>
  
      <div v-if="state.interval === 'monthly'">
        Number: <v-autocomplete v-model="state.selectedv" v-bind:items="monthlyItems" light autocomplete>
      </v-autocomplete>
      </div>
  
   <div>
    <md-autocomplete v-model="state.selectedmd" :md-options="states">
      <label>md-state</label>
    </md-autocomplete>
  </div>
 
  <v-card>
      <v-autocomplete
        v-model="state.model"
        :items="states"
        :label="`State — ${isEditing ? 'Editable' : 'Readonly'}`"
        persistent-hint>
      </v-autocomplete>
  </v-card>

  <pre> {{$data.state | json 2}}</pre>
</div>

script.babel

Vue.use(VueMaterial.default)

new Vue({
  el: '#app',
    data: {
    state: {
      monthly: null,
      weekly: null,
      interval: 'monthly',
      initial: null,
     selectedv: null,
    selectedmd: null,
    model: null
    },
    monthlyItems: _.range(1, 39),
    isEditing: true,
        states: [
          'Alabama', 'Alaska', 'American Samoa', 'Arizona',
          'Arkansas', 'California', 'Colorado', 'Connecticut',
          'Delaware', 'District of Columbia', 'Federated States of Micronesia',
          'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
          'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
          'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
          'Missouri', 'Montana', 'Nebraska', 'Nevada',
          'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
          'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
          'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
          'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
          'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
          'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
        ]  
  }
})

scripts

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

style.scss

.md-content .div div {
  padding: 9px;
};
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css" rel="stylesheet" />
<link href="https://unpkg.com/vue-material@beta/dist/theme/default.css" rel="stylesheet" />
<link href="https://unpkg.com/vuetify@1.5.0/dist/vuetify.min.css" rel="stylesheet" />