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

【问题标题】：Enable Button on DropDown Select in Vue?在Vue中启用下拉选择按钮？
【发布时间】：2020-01-10 03:02:43
【问题描述】：

我正在使用 vuetify 材质库，并且我有一个 v-select，其中分配了项目。我怎样才能使只有当一个项目被选中时，该按钮才会被启用？

这是一个示例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>

因此，默认情况下，该按钮将被禁用，只有在从下拉列表中的一个选项中进行选择时，该按钮才会启用。谢谢你的帮助。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您需要将v-select 绑定到一个变量，然后通过检查变量值有条件地禁用按钮，如下所示。

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

【讨论】：