我在这里发现了同样的问题，但它们不在vue.js中，我找不到如何在vue.js中做到这一点。
我有8个select项。它们都从数据库中得到相同的option值。
<div class="card-body">
<div>
<label>Polje 1:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}</option
></select
>
</div>
<div>
<label>Polje 2:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}</option
></select
>
</div>
<div>
<label>Polje 3:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}</option
></select
>
</div>
<div>
<label>Polje 4:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}</option
></select
>
</div>
<div>
<label>Polje 5:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}</option
></select
>
</div>
<div>
<label>Polje 6:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}</option
></select
>
</div>
<div>
<label>Polje 7:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}<img :src="podatak.url"></option
></select
>
</div>
<div>
<label>Polje 8:</label
><select
><option
v-for="podatak in podaci"
:key="podatak.id"
>{{ podatak.name }}</option
></select
>
</div>
</div>问题:
让我们假设它们都有options: "A"， "B"， "one_answers";D"。例如，如果我选择"A"在我的第二select如何禁用"A"from all otherselects?
将当前选择的值存储在data()值中。如果值与存储值相匹配，则设置:禁用每个选项属性:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<select @change="setSelectedValue">
<option v-for="podatak in podaci"
:disabled="podatak.name === selectedValue"
:key="podatak.id">{{ podatak.name }}</option>
</select>
<select @change="setSelectedValue">
<option v-for="podatak in podaci"
:disabled="podatak.name === selectedValue"
:key="podatak.id">{{ podatak.name }}</option>
</select>
<select @change="setSelectedValue">
<option v-for="podatak in podaci"
:disabled="podatak.name === selectedValue"
:key="podatak.id">{{ podatak.name }}</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
podaci: [
{
id: 0,
name: 'aaa'
},
{
id: 1,
name: 'bbb'
},
{
id: 2,
name: 'ccc'
},
],
selectedValue: null
},
methods: {
setSelectedValue(event) {
this.selectedValue = event.target.selectedOptions[0].value;
}
}
})
</script>
</body>
</html>这不是一个合适的解决方案console.log (event.target.selectedOptions);
我没有得到多个选项来禁用。