Vue.js禁用了选定的下拉选项? [英] Vuejs disabled selected dropdown options?
本文介绍了Vue.js禁用了选定的下拉选项?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个数组selected，其中包含一组选定的选项.我想使用该数组在这些选项上添加disabled属性.
I have an array selected which holds a set of selected options. I'd like to use that array to add a disabled attribute on those options.
<!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>
推荐答案
您要禁用所选数组中的所有选项吗?
You want to disable all options that are in the selected array?
<option v-for="option in options" :disabled="selected.includes(option.value)" :value="option.value">
这篇关于Vue.js禁用了选定的下拉选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
