Enable Button on DropDown Select in Vue?

101
January 10, 2020, at 1:10 PM

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>

Answer 2

Try this, bound it to the select element

Try this: v-bind:disabled="newName === ''"
READ ALSO
How do I check if an invite link is invalid in discord js?

How do I check if an invite link is invalid in discord js?

I am making a discord bot for my server and I have a self-promotion channel and I want my bot to delete invalid invite links

224
Electron | window.flashFrame(true) and App.dock.bounce(&ldquo;critical&rdquo;) not working after a while

Electron | window.flashFrame(true) and App.dock.bounce(“critical”) not working after a while

Has anyone encountered this issue before? Any help would be appreciated

81
Can we control the print dialog box in chrome using javascript

Can we control the print dialog box in chrome using javascript

i am looking for how to control the print dialog or print preview in google chrome by javascripti don't want it to show the dialog

91
Typescript Universal method decorator returning Promise as value

Typescript Universal method decorator returning Promise as value

I'm trying to implement a universal method decorator that can be used with both prototype and instance methods

93