[Vuejs]-Enable Button on DropDown Select in Vue?

by

1👍

✅

You need to bind your v-select to a variable, and then conditionally disable the button by checking the variable value, something like the following.

See codepen.

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        'Foo', 'Bar', 'Biz', 'Buzz'
      ],
      selectedItem: null
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-layout row class="ml-3">
      <v-flex xs4>
        <v-select label="Select Something" :items="items" v-model="selectedItem"></v-select>
      </v-flex>
      <v-flex xs4 class="ml-3 mt-2">
        <v-btn :disabled="selectedItem === null">Button</v-btn>
      </v-flex>
    </v-layout>
  </v-app>
</div>
👤Psidom

Leave a comment