我在這里找到了同樣的問題，但它們不在 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”、“C”和“D”。例如，如果我在第二個中選擇“A”，select如何從所有其他選項中禁用“A” selects？
uj5u.com熱心網友回復：
將當前選定的值存盤在 data() 值中。如果值與存盤的值匹配，則將 :disabled 設定為每個選項屬性：
<!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/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342595.html
標籤：javascript Vue.js
上一篇：如何在vuejs方法中傳遞url并在@click上觸發
下一篇：JWT重繪和訪問令牌