如何禁用选择选项的值？ (vue.js 2)答案

【问题标题】：How to disable value on the select option ? (vue.js 2)如何禁用选择选项的值？ (vue.js 2)
【发布时间】：2017-06-29 09:10:15
【问题描述】：

我的组件是这样的：

<div id="demo">
  <div>
    <select class="form-control" v-model="selected" required>
      <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
    </select>
    {{selected}}
  </div>
</div>

var demo = new Vue({
  ...
  data() {
    return {
      selected: '',
      options: [{
        id: '',
        name: 'Select Category'
      }]
    };
  },
  ...
})

在此处查看完整代码和演示：https://fiddle.jshell.net/oscar11/stvct9er/5/

我想禁用“选择类别”。所以“选择类别”被禁用。用户不能选择它。用户只能选择“选择类别”以外的值。

我该怎么做？

【问题讨论】：

我在手机上，所以无法发布完整的答案，但 optgroup 就足够了吗？
@Adrian Wragg，“optgroup”是什么意思？
我看到你已经有一个接受的答案，但是optgroup 可以在select 标签中使用，以便为一组选项提供标题。

标签： javascript jquery vue.js vuejs2 vue-component

【解决方案1】：

你应该直接在select标签中添加option。

<select class="form-control" v-model="selected" required>
  <option value="" disabled>Select a category</option>
  <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
</select>

另外，将其从 data 函数中删除。

data() {
  return {
    selected: '',
    options: []
  };
}

我不建议您在options 数组中添加此选项，因为它是您的select 的placeholder 属性。

【讨论】：

【解决方案2】：

其他选项可能是使用绑定禁用该元素

<option v-for="option in options" 
        :disabled="!option.id"
        v-bind:value="option.id">
    {{ option.name }}
</option>

【讨论】：

感谢您提供有关:disabled="!option.id"的信息。