Revamp your arrays with input fields in Vue3

Question

Revamp your arrays with input fields in Vue3

When presented with two arrays of options, users must select an option from each array.

==> first array: [ orange, green, yellow ] ==> second array: [ orange, green, yellow ]

The challenge is to update the second array based on the user's selection in the first array. For example, if a user selects "green" in the first input:

==> first array: "green" (selected) ==> second array: [orange, yellow] (options not selected in the first array)

I am new to Vue3 and unsure how to achieve this. Any help would be appreciated!

javascript arrays vue.js input vuejs3

Answer 1

Answer №1

If you want to filter out remaining items using computed property, here's how you can do it:

const { ref, computed } = Vue
const app = Vue.createApp({
  // COMPOSITION API
  setup() {
    const items = ref([ 'orange', 'green', 'yellow' ])
    const selected = ref(null)
    const selected2 = ref(null)
    
    const remainItems = computed(() => items.value.filter(i => !i.includes(selected.value)))
    
    return { items, selected, selected2, remainItems }
  }
  // OPTIONS API
  /*data() {
    return {
      items: [ 'orange', 'green', 'yellow' ],
      selected: null,
      selected2: null
    };
  },
  computed: {
    remainItems() {
      return this.items.filter(i => !i.includes(this.selected))
    }
  }*/
})
app.mount('#demo')

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ff9faeacfbca1bda1bdb6">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="demo">
  <div>Selected: {{ selected }}</div>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="item in items">{{item}}</option>
  </select>
  <div>Selected: {{ selected2 }}</div>
  <select v-model="selected2">
    <option disabled value="">Please select one</option>
    <option v-for="item in remainItems">{{item}}</option>
  </select>
</div>

Answer 2

If you want to filter out remaining items using computed property, here's how you can do it:

const { ref, computed } = Vue
const app = Vue.createApp({
  // COMPOSITION API
  setup() {
    const items = ref([ 'orange', 'green', 'yellow' ])
    const selected = ref(null)
    const selected2 = ref(null)
    
    const remainItems = computed(() => items.value.filter(i => !i.includes(selected.value)))
    
    return { items, selected, selected2, remainItems }
  }
  // OPTIONS API
  /*data() {
    return {
      items: [ 'orange', 'green', 'yellow' ],
      selected: null,
      selected2: null
    };
  },
  computed: {
    remainItems() {
      return this.items.filter(i => !i.includes(this.selected))
    }
  }*/
})
app.mount('#demo')

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ff9faeacfbca1bda1bdb6">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="demo">
  <div>Selected: {{ selected }}</div>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="item in items">{{item}}</option>
  </select>
  <div>Selected: {{ selected2 }}</div>
  <select v-model="selected2">
    <option disabled value="">Please select one</option>
    <option v-for="item in remainItems">{{item}}</option>
  </select>
</div>

Revamp your arrays with input fields in Vue3

Answer №1

Similar questions

How can I implement jQuery autocomplete with customized settings?

Can you explain the distinction between $scope.$root and $rootScope?

kineticjs equivalent to jquery sortable

Looking for arrays with duplicate values across multiple elements - a comprehensive guide

Remove buttons from carousel elements in React Multi-Carousel

When utilizing the dojox.grid.enhanceGrid function to delete a row, the deletion will be reflected on the server side but

Substitute the information in the table with new data

Navigating through a list using tabs and automatic scrolling to a specific index in React with Material UI's Scrollspy

What is the best way to combine database table data based on two columns and then display it as a json

Ajax is incapable of achieving success or encountering failure

Combine two arrays with different elements into a dictionary

Using jQuery to send LocalStorage data to an email address with the help of PHP

Switching between three div elements along with two icons can be done by using toggle functionality

Why is the button's ng-click changing the URL but not displaying the new view?

Warning: Update state in React-router-redux after redirection

Drop and drag to complete the missing pieces

Detecting changes to DOM elements without using jQueryResponding to DOM element

The scrolling speed of the mousewheel in Firefox is notably slower compared to that of Google Chrome

When defining properties/data in Vue mixins, the properties/data of the mixin are not accessible

Acquiring a fresh scope in Angular via a different component