Modify the output information in a VueJS dropdown menu

Question

Modify the output information in a VueJS dropdown menu

I have a VueJS multiselect component that is displaying data from a JSON file using axios. Unfortunately, I am unable to modify the data directly. However, I would like to edit the text displayed and hide any blank entries.

For example, I want 'BL' to be shown as 'Black', 'BLK' as 'Blue', etc.

<div class="multiselect-dropdown is-hidden" tabindex="-1">
    <ul class="multiselect-options">
      <li class="multiselect-option"><span>BL</span></li>
      <li class="multiselect-option"><span></span></li>
      <li class="multiselect-option"><span>BLK</span></li>
      <li class="multiselect-option"><span>GR</span></li>
      <li class="multiselect-option"><span>PUR</span></li>
      <li class="multiselect-option"><span>YEL</span></li>     
    </ul>

Any assistance with this issue would be greatly appreciated!

javascript vue.js vuejs2

Answer 1

Answer №1

To enhance efficiency, consider implementing either format modification during data retrieval or utilize computed properties.

methods: {
  getColors() {
    api.get().then((colors) => {
      this.colors = colors.map((color) =>
        if (color.name === 'BLK') {
          color.name = 'Black'
        }

        ...

        return color
      })
    })
  }
}

Alternatively,

computed: {
  colorsForMultiselect() {
    return this.colors.map((color) =>
      if (color.name === 'BLK') {
        color.name = 'Black'
      }

      ...

      return color
    })
  }
}

You may also simplify the code by creating a color mapping system instead of utilizing multiple conditional statements.

const colors = {
  'BLK': 'Black',
}

const colorName = colors['BLK']

Answer 2

To enhance efficiency, consider implementing either format modification during data retrieval or utilize computed properties.

methods: {
  getColors() {
    api.get().then((colors) => {
      this.colors = colors.map((color) =>
        if (color.name === 'BLK') {
          color.name = 'Black'
        }

        ...

        return color
      })
    })
  }
}

Alternatively,

computed: {
  colorsForMultiselect() {
    return this.colors.map((color) =>
      if (color.name === 'BLK') {
        color.name = 'Black'
      }

      ...

      return color
    })
  }
}

You may also simplify the code by creating a color mapping system instead of utilizing multiple conditional statements.

const colors = {
  'BLK': 'Black',
}

const colorName = colors['BLK']

Answer 3

Answer №2

Utilize the Map feature to organize your choices and then apply filters and mappings to your data:

new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
      options: [{name:'BL'}, {name: ''}, {name: 'BLK'}, {name: 'GR'}, {name: 'PUR'}, {name: 'YEL'}],
      mapOptions: new Map([['bl', 'Blue'], ['blk', 'Black'], ['gr', "Green"], ['pur', 'Purple'], ['yel', 'Yellow'])
    }
  },
  computed: {
    filteredOptions() {
      return this.options
        .filter(o => o.name)
        .map(m => {
          m.desc = this.mapOptions.get(m.name.toLowerCase())
          return m
        })
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="205655450d4d554c544953454c45435460120e110e10">[email protected]</a>"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c2c1d199d9c1d8c0ddc7d1d8d1d7c0f4869a859a84">[email protected]</a>/dist/vue-multiselect.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
  <multiselect
    v-model="value"
    placeholder="name"
    label="desc" track-by="name"
    :options="filteredOptions"
    :multiple="true"
    :taggable="true"
  ></multiselect>
  {{value}}
</div>

Answer 4

Utilize the Map feature to organize your choices and then apply filters and mappings to your data:

new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      value: [],
      options: [{name:'BL'}, {name: ''}, {name: 'BLK'}, {name: 'GR'}, {name: 'PUR'}, {name: 'YEL'}],
      mapOptions: new Map([['bl', 'Blue'], ['blk', 'Black'], ['gr', "Green"], ['pur', 'Purple'], ['yel', 'Yellow'])
    }
  },
  computed: {
    filteredOptions() {
      return this.options
        .filter(o => o.name)
        .map(m => {
          m.desc = this.mapOptions.get(m.name.toLowerCase())
          return m
        })
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="205655450d4d554c544953454c45435460120e110e10">[email protected]</a>"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c2c1d199d9c1d8c0ddc7d1d8d1d7c0f4869a859a84">[email protected]</a>/dist/vue-multiselect.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
  <multiselect
    v-model="value"
    placeholder="name"
    label="desc" track-by="name"
    :options="filteredOptions"
    :multiple="true"
    :taggable="true"
  ></multiselect>
  {{value}}
</div>

Modify the output information in a VueJS dropdown menu

Answer №1

Answer №2

Similar questions

Why does the <select> dropdown flash when I select it?

Incorporate HTML and JavaScript to dynamically show a button when a specified condition evaluates as true and hide the button if the

Discover Headphones with Ionic

The functionality of React setState seems to be malfunctioning when activated

Retrieving data from various endpoints using React JS

Difficulty encountered when transferring an array from Xcode to JavaScript via SBJSON

Utilizing Piwik Analytics in jQuery Mobile Framework

Creating dynamic cubes in Magento with interact.js within a .phtml template

Is there a replacement for jQuery's each() function in vanilla JavaScript?

Leveraging AJAX to call upon a designated php file

Issue with adding HTML content to bootstrap modal not functioning as expected

Utilizing external sources to add texture to 3D models in WebGL

Transforming .POST into corresponding .AJAX techniques

Reveal the administrator's details exclusively when the associated radio button is chosen

Code snippet for positioning a div element above a canvas when clicked on the canvas

Looking to efficiently output information generated within a headless browser in node.js

Enhance your data visualization with d3.js version 7 by using scaleOrdinal to effortlessly color child nodes in

Are there specific files or classes that store constants for different keyboard events?

Dealing with cross-origin AJAX posting in Node.js处理Node.js中的

Executing a VueJS getter function in the browser console - a step-by-step guide