PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Sunday, October 16, 2022

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

 October 16, 2022     javascript, vue.js     No comments   

Issue

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?


Solution

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/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>



Answered By - Joulss
Answer Checked By - Mary Flores (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing