jquery - Vuejs 禁用了选定的下拉选项?

标签 jquery vue.js

我有一个数组selected,其中包含一组选定的选项。我想使用该数组在这些选项上添加一个 disabled 属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Vue-js Control </title>
    </head>
    <body>
        <div id="demo">
            <select v-model="selected" multiple>
              <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
              </option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>

    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js'></script>
    <script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            selected: ['A','B','D'],
            options: [
              { text: 'One', value: 'A' },
              { text: 'Two', value: 'B' },
              { text: 'Three', value: 'C' },
              { text: 'Four', value: 'D' },
              { text: 'Five', value: 'E' },
              { text: 'Six', value: 'F' },
              { text: 'Seven', value: 'G' },
            ]
        }
    });
    </script>
</body>

最佳答案

您想禁用所选数组中的所有选项吗?

<option v-for="option in options" :disabled="selected.includes(option.value)" :value="option.value">

关于jquery - Vuejs 禁用了选定的下拉选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35594885/

相关文章:

javascript - 获取列表项中的文本 jquery 不适用于 chrome 和 ie

javascript - 相同的函数,不同的随机结果 - jQuery

javascript - 建立一个 Electron 项目需要多长时间?

javascript - 为什么我的编辑页面在 Laravel 中不起作用?我使用了 vue.js

vue.js - 如何在 vue.js 中创建嵌套绑定(bind)范围?

vue.js - 多页应用程序 VueJs

vue.js - 是否可以使用 v-bind :value or v-model for the object gotten from the network?

javascript - 重构简单按钮的 jQuery 显示/隐藏方法的过度使用

jquery - 检查 div 是否可见

javascript - 在 for 循环中构造时仅返回数组的最后一个值