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

Manipulating variables across various methods in TypeScript

Making a REST call with values containing an apostrophe

Unit Testing in Aurelia: Creating a Mock for a Custom Resolver

Tests using Cypress for end-to-end testing are failing to execute in continuous integration mode on gitlab.com

Utilizing Multiple Components on a Single Page in React.js

Having trouble retrieving the default selected value using the index in Angular Material's mat-button-toggle functionality

Obtain an Element Using Puppeteer

Ajax calls for validations are failing to trigger a response from PHP

"Optimize your website by incorporating lazy loading for images with IntersectionObserver for enhanced performance

Having trouble with loading JSON due to a Cross-Domain AJAX problem

Is it possible to use require() to read a .json file from a dependent library?

Break apart the string and transform each element in the array into a number or string using a more specific type inference

The input box fails to show larger values on the user's page

The Typescript SyntaxError occurs when attempting to use an import statement outside of a module, typically within a separate file that contains

Deploying CSS/JS files in Magento 2 is a crucial

Guide to utilizing a ref in multiple components within Vuejs

Using JQuery to enhance the functionality of ajax-loaded content

Tips for enhancing the efficiency of my JavaScript code?

There seems to be an issue with the Webpack command as it is unable to locate the module 'webpack'

What is the best way to restore a component's state to its default settings when it receives new props?