VueJS - 如果选项少于 2 个，则禁用选择下拉菜单

Question

我有几个选择下拉菜单，它们使用 Axios 调用提取数据。如果剩下的选项少于 2 个，我希望禁用下拉菜单（灰显）。我已设法禁用提交按钮作为概念证明，但我无法禁用选择菜单本身。也许你不能这样做，我不确定。像大多数发布 Vue 问题的人一样。我是 Vue 的新手 :) 任何帮助将不胜感激。

<div id="app">
<select v-model="quantity">
 <option disabled value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
  <option value="5">5</option>
   <option value="6">6</option>
</select>

 <button type="submit" :disabled="submitDisabled">Submit</button>
</div>

new Vue({
  el: '#app',
  data: {
    quantity :""
  },
  computed: {
    submitDisabled: function () {
    return this.quantity < 2 ? true : false;
    }
  }
});

Answer 1

您可以使用v-bind 指令将<select> 的disabled 属性绑定到像selectDisabled 这样的计算属性：

<select v-model="quantity" v-bind:disabled="selectDisabled">

例子：

new Vue({
  el: '#app',
  data: {
    quantity: 0,
    options: [1, 2]
  },
  computed: {
    submitDisabled: function() {
      return this.quantity < 2;
    },
    selectDisabled: function() {
      return this.options.length <= 2;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="quantity" :disabled="selectDisabled">
    <option disabled value="">Select</option>
    <option v-for="option in options" :value="option">{{option}}</option>
  </select>

  <button type="submit" :disabled="submitDisabled">Submit</button>
</div>