Кнопка включения на DropDown Выберите в Vue? - PullRequest
Новая
       7

Кнопка включения на DropDown Выберите в Vue?

0 голосов
/ 10 января 2020

Я использую библиотеку материалов vuetify, и у меня есть v-select с назначенными ей элементами. Как сделать так, чтобы только когда в выбранном элементе была активирована кнопка?

Вот образец ручка . 

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>

Таким образом, по умолчанию кнопка будет отключена, только при выборе одной из опций в раскрывающемся списке кнопка будет включена. Спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 10 января 2020

Вам необходимо связать свой 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>
0 голосов
/ 10 января 2020

Попробуйте, привязайте его к элементу выбора 

Try this: v-bind:disabled="newName === ''"
...