I have found here same questions but they are not in vue.js and I can't find out how to do that in vue.js.
I have 8 select items. They all get same option values from database.
<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>Question:
Let's imagine they all have options: "A", "B", "C" and "D". For example, If I select "A" in my 2nd select how to disable "A" from all other selects?
CodePudding user response：
Store the current selected value in a data() value. Set :disabled to each option attribute if the value is matching the stored value :
<!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>