在 Vue 中启用下拉选择按钮？

Question

I am using the vuetify material library and i have a v-select with items assigned to it. How can i make so that only when an item in selected that the button will get enabled?

Here is a sample pen .

 new Vue({ el: '#app', data() { return { items: [ 'Foo', 'Bar', 'Biz', 'Buzz' ] } } })

 <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-select> </v-flex> <v-flex xs4 class="ml-3 mt-2"> <v-btn disabled>Button</v-btn> </v-flex> </v-layout> </v-app> </div>

So by default the button will be disabled, only on a select from one of the options in the dropdown will the button be enabled. Thank you for the help.

Answer 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>