Choosing between exclusive choices across multiple selection elements in Vue 3

Question

Choosing between exclusive choices across multiple selection elements in Vue 3

In my Vue component, there are 5 distinct values stored in the options variable. I want users to select only one value from each of the 5 select options I provide. This means that once a user selects a value in one input select component, that same value cannot be chosen in any of the other components.

For example:

input one: [ orange, green, yellow, black, blue ] 
input two: [ orange, green, yellow, black, blue ] 
input three: [ orange, green, yellow, black, blue ] 
input four: [ orange, green, yellow, black, blue ] 
input five: [ orange, green, yellow, black, blue ]

If a user selects "orange" in input one, they cannot select "orange" again in inputs 2 through 5.

I have attempted to address this by creating arrays to track selected items and available items, but I am struggling to find a solution.

How can I resolve this issue in Vue 3?

javascript arrays vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

To efficiently handle selection in Vue, you can create a component and pass necessary parameters to it:

const { ref, computed, watch } = Vue
const app = Vue.createApp({
  setup() {
    const items = ref(['orange', 'green', 'yellow', 'blue', 'purple'])
    const getItems = computed(() => 
      items.value.filter(i => !selected.value.includes(i))
    )
    
    const selected = ref([])
    const getSelected = (val) => { 
      if(!selected.value.includes(val)) selected.value.push(val) 
    }
    
    const reseted = ref(false)
    const reset = () => {
      selected.value = []
      reseted.value = true
    }
    
    return { items, selected, getSelected, getItems, reset, reseted }
  }
})
app.component('selComp', {
  template: `
    <div :style="{color: selected}">Selected {{ idx + 1 }}: {{ selected }}</div>
    <select v-model="selected" @change="setSelected($event)">
      <option disabled value="">Please select one</option>
      <option v-for="item in items" :key="item">{{ item }}</option>
    </select>
  `,
  props: ['items', 'idx', 'reseted'],
  setup(props, { emit }) {
    const selected = ref(null)
    const setSelected = (e) => { emit('select', e.target.value) }
    
    watch(() => props.reseted, () => {
      selected.value = null
      emit('cleared')
    })
    
    return { selected, setSelected }
  }
})
app.mount('#demo')

.cont{
  display: flex;
  flex-wrap: wrap;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5939080a5d6cbd7cbd7dc">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="cont">
    <div v-for="(item, i) in items.length" :key="i">
      <sel-comp :items="getItems" :idx="i" :reseted="reseted" 
        @select="getSelected" @cleared="reseted=false">
      </sel-comp>
    </div>
  </div>
  <p>{{ selected }}</p>
  <button @click="reset">Reset</button>
</div>

Answer 2

To efficiently handle selection in Vue, you can create a component and pass necessary parameters to it:

const { ref, computed, watch } = Vue
const app = Vue.createApp({
  setup() {
    const items = ref(['orange', 'green', 'yellow', 'blue', 'purple'])
    const getItems = computed(() => 
      items.value.filter(i => !selected.value.includes(i))
    )
    
    const selected = ref([])
    const getSelected = (val) => { 
      if(!selected.value.includes(val)) selected.value.push(val) 
    }
    
    const reseted = ref(false)
    const reset = () => {
      selected.value = []
      reseted.value = true
    }
    
    return { items, selected, getSelected, getItems, reset, reseted }
  }
})
app.component('selComp', {
  template: `
    <div :style="{color: selected}">Selected {{ idx + 1 }}: {{ selected }}</div>
    <select v-model="selected" @change="setSelected($event)">
      <option disabled value="">Please select one</option>
      <option v-for="item in items" :key="item">{{ item }}</option>
    </select>
  `,
  props: ['items', 'idx', 'reseted'],
  setup(props, { emit }) {
    const selected = ref(null)
    const setSelected = (e) => { emit('select', e.target.value) }
    
    watch(() => props.reseted, () => {
      selected.value = null
      emit('cleared')
    })
    
    return { selected, setSelected }
  }
})
app.mount('#demo')

.cont{
  display: flex;
  flex-wrap: wrap;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5939080a5d6cbd7cbd7dc">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="cont">
    <div v-for="(item, i) in items.length" :key="i">
      <sel-comp :items="getItems" :idx="i" :reseted="reseted" 
        @select="getSelected" @cleared="reseted=false">
      </sel-comp>
    </div>
  </div>
  <p>{{ selected }}</p>
  <button @click="reset">Reset</button>
</div>

Choosing between exclusive choices across multiple selection elements in Vue 3

Answer №1

Similar questions

React Material-UI Multiple Select with Checkboxes not displaying initial selections as checked

Unusual occurrences when using `mapply` in R

What results can be expected from a piped file stream?

What could be causing the shake effect on the MUI dialog to not work when clicking away?

What sets Joomla file inclusion apart from the rest?

Fetching data in a post request seems to be causing an issue with FormData image being

What are some effective design principles for creating REST APIs in expressjs?

What is the best way to incorporate a Json file into a JavaScript file?

To obtain the desired response, I must make an additional GET request

What could be causing my table to appear multiple times in the HTML when using jQuery?

Transforming Several Dropdowns using jQuery, JSON, and PHP

Encountering a "Module not found" error while trying to run npm start in a Create React App

Unable to display select options in Laravel blade due to Vue.js v-for issue

IE encounters issues making Ajax calls when transitioning from secure HTTPS requests to insecure HTTP requests

Incorporate pictures from the popup onto the main page

Angular binding causing decimal inaccuracies

Tips for integrating JavaScript code into React JS applications

"Using PHP to encode an array into JSON format might result in additional

What is the best method for showcasing the parsed JSON data in a list view?

Efficient method for handling numerous AJAX requests