Question

我正在使用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>

因此，默认情况下，该按钮将被禁用，只有从下拉菜单中的一个选项中进行选择后，该按钮才会被启用。谢谢您的帮助。

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

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

1 个答案: