Looping through Vue with multiple options

Question

Looping through Vue with multiple options

Looking for help with Vue2 looping to display multiple options within a select element.

We have an object structured like this;

sorting = {
    name: [
        'asc',
        'desc'
    ],
    price: [
        'cheapest',
        'expensive'
    ]
}

How can we set up the loop to achieve the desired output below?

<select>
    <option value="name:asc">name asc</option>
    <option value="name:desc">name desc</option>
    <option value="price:cheapest">price cheapest</option>
    <option value="price:expensive">price expensive</option>
</select>

Struggling to figure out how to include the second option listed above;

<select id="sortBy" class="form-control pr-3" v-model="sortBy">
    <option
        v-for="(options, sort) in sorting" :key="`${sort}`"
        v-bind:value="`${sort}:${options[0]}`"
    >
        {{ sort }} {{ options[0] }}
    </option>
</select>

javascript vue.js vuejs2

Answer 1

Answer №1

One reason for this issue is that your sorting data includes nested arrays. To address this, you need to iterate through each key (which you've already done) and then iterate through the array within each key to create the options.

Instead of dealing with this complexity directly in the template, which can make it less readable, my suggestion is to create a computed property that handles the option generation for you.

A simple approach would be to use Object.entries() to get a tuple of key and value, then iterate through the value to return the key:arrayValue combination. You can use Array.prototype.flatMap to flatten the resulting array:

new Vue({
  el: '#app',
  data: {
    sorting: {
      name: [
        'asc',
        'desc'
      ],
      price: [
        'cheapest',
        'expensive'
      ]
    },
    sortBy: '',
  },
  computed: {
    options() {
      return Object.entries(this.sorting).flatMap(([key, optionsByKey]) => {
        return optionsByKey.map(v => `${key}:${v}`);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="sortBy" class="form-control pr-3" v-model="sortBy">
    <option v-for="(option, i) in options" :key="i" :value="option">
      {{ option.replace(':', ' ') }}
    </option>
  </select>
  <br /><br />
  Selected value: {{ sortBy }}
</div>

Answer 2

One reason for this issue is that your sorting data includes nested arrays. To address this, you need to iterate through each key (which you've already done) and then iterate through the array within each key to create the options.

Instead of dealing with this complexity directly in the template, which can make it less readable, my suggestion is to create a computed property that handles the option generation for you.

A simple approach would be to use Object.entries() to get a tuple of key and value, then iterate through the value to return the key:arrayValue combination. You can use Array.prototype.flatMap to flatten the resulting array:

new Vue({
  el: '#app',
  data: {
    sorting: {
      name: [
        'asc',
        'desc'
      ],
      price: [
        'cheapest',
        'expensive'
      ]
    },
    sortBy: '',
  },
  computed: {
    options() {
      return Object.entries(this.sorting).flatMap(([key, optionsByKey]) => {
        return optionsByKey.map(v => `${key}:${v}`);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="sortBy" class="form-control pr-3" v-model="sortBy">
    <option v-for="(option, i) in options" :key="i" :value="option">
      {{ option.replace(':', ' ') }}
    </option>
  </select>
  <br /><br />
  Selected value: {{ sortBy }}
</div>

Answer 3

Answer №2

Utilize a dual option loop setup.

<select id="sortBy" class="form-control pr-3" v-model="sortBy">
    <option
        v-for="n in options.name" :key="`name:${n}`"
        :value="`name:${n}`"
    >
        name {{ n }}
    </option>
    <option
        v-for="p in options.price" :key="`price:${p}`"
        :value="`price:${p}`"
    >
        price {{ p }}
    </option>
</select>

Answer 4

Utilize a dual option loop setup.

<select id="sortBy" class="form-control pr-3" v-model="sortBy">
    <option
        v-for="n in options.name" :key="`name:${n}`"
        :value="`name:${n}`"
    >
        name {{ n }}
    </option>
    <option
        v-for="p in options.price" :key="`price:${p}`"
        :value="`price:${p}`"
    >
        price {{ p }}
    </option>
</select>

Looping through Vue with multiple options

Answer №1

Answer №2

Similar questions

Featuring data utilizing Ajax JSON in CodeIgniter

The Cordova minification tool fails to compress files within the browser platform

broker handling numerous ajax requests simultaneously

Tips for positioning the cursor at the beginning of text and shifting the focus to the start while utilizing the MaterialUI Input component

If I dared to eliminate the emphasized line, this code would completely fall apart

Creating a Border Length Animation Effect for Button Hover in Material-UI

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

why is my angular listing malfunctioning when I try to compare two fields?

In JavaScript, the function yields a proxy rather than an object

AngularJS is experiencing delays when processing subsequent $http delete requests, leaving them stuck in a

What is the best way to transfer a value from a function to a variable in VueJs?

MongoDB results are being pushed into an array, yet the array continues to stay devoid of any data

How can I create a fading trail effect in Three.js that diminishes over time?

Utilizing Vuex for Efficient Management of Forms with Ever-Changing Data

What could be causing the invalid expression error to pop up in my Vue.js template?

Tips for utilizing Vue-CLI-service to serve content over HTTP-2

Is the JSON response in the AJAX request accurate, even though the content is not being refreshed?

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

How can I use JavaScript fetch to retrieve data from a JSON file based on a specific value?

Modify the button's border color upon click action