Vue JS - 禁用后显示选择菜单的选项2答案

【问题标题】：Vue JS - Display option 2 of select menu after it is disabledVue JS - 禁用后显示选择菜单的选项2
【发布时间】：2021-07-22 00:20:27
【问题描述】：

我正在寻求有关如何在选择菜单被禁用后在选择下拉菜单中显示第二个选项的帮助。

如果剩下的选项少于 2 个，它会被禁用。第一个选项是“请选择”选项，但我希望它显示剩余的选项，即第二个选项。即下面代码中的“苏格兰”。数据是使用 Axios 调用拉入的，所以我不知道值是什么。

任何帮助将不胜感激。

选择菜单代码

 <select disabled="disabled">
    <option disabled="disabled" value="">Select nationality</option>
    <option value="Scotland"> Scotland </option>
    </select>

Vue

   computed: {         
        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>   
 


   </div>

【问题讨论】：

标签： vue.js

【解决方案1】：

您需要创建一个特殊的计算属性，它会动态地告诉<select> 它应该在其内部显示哪个选项。 <select> 显示与 <select> 的值匹配的选项。

所以：

当禁用“选择时（具有少于2个选项），强制它是第一个列出选项的值（this.options[0]）。
启用选择时，传递用户选择的正常值（this.value）

我已经在下面实现了你需要的逻辑（一定要点击“Run sn-p”）：

const App = {
  el: '#app',
  template: `
    
    <div>
      <!-- 
        Remember that writing v-model="quantity" is the same as writing :value="quantity" @input="quantity = $event" 
        (or @input="quanity = $event.target.value" if you put in HTML elements)
        
        You can't use v-model="valueFormatted" here because this would be the same as writing
        :value="valueFormatted" @input="valueFormatted = $event.target.value"
        
        So that's a mistake, because valueFormatted is a computed and you can't assign to it 
        (unless you create a special computed with a setter, but that's not what you need right now)
      -->
      <select :value="valueFormatted" @input="value = $event.target.value" :disabled="disabled">
        <option disabled="disabled" value="">Select nationality</option>
        <option v-for="option in options" :value="option">{{option}}</option>
      </select>
      <hr>
      <div>
        <button @click="options = ['Scotland']">Make the select have 1 item</button>
        <button @click="options = ['Scotland', 'Poland']">Make the seelct have 2 items</button>
      </div>
    </div>
  `,
  data() {
    return {
      options: ["Scotland", "Poland"],
      value: '',
    }
  },
  computed: {
    disabled() {
      return this.options.length < 2
    },
    /*
     * If this.disabled is true, returns the value of the first option
     * If it's false, it returns the normal value from data (user selected)
     */
    valueFormatted() {
      //watch out - this computed will return undefined if this.disabled is true and if options is empty
      //to avoid that, you can do for example this:
      //return this.disabled === true ? (this.options[0] ?? '' ) : this.value;
      return this.disabled === true ? this.options[0] : this.value;
    },
  },
}

new Vue(App);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>

<body>
  <div id="app" />
</body>

</html>

稍后您可能会使用此选择的值来制作例如。 API 调用，因此请确保发送 this.valueFormatted 而不是 this.value

【讨论】：

非常感谢！！一个很棒且非常有帮助的回应。