CODEWITHSUNDEEP
javascriptvue.js
Raskoljnikovic
Raskoljnikovic

Reputation: 99

How to disable select option from one Select based on other select in Vue.js?

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?

Upvotes: 0

Views: 2221

Answers (2)

Kishan Das
Kishan Das

Reputation: 1

it's not a proper solution, please console.log(event.target.selectedOptions);

I have not gotten multiple options to disable.

Upvotes: 0

Joulss
Joulss

Reputation: 1189

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>

Upvotes: 1

Related Questions