更改 VueJS 多选中的输出数据答案

【问题标题】：Change the output data in a VueJS multiselect更改 VueJS 多选中的输出数据
【发布时间】：2022-10-04 16:20:59
【问题描述】：

这是一个 VueJS 多选 html 输出。它通过 axios 从 JSON 文件中提取数据。我无法更改数据。如果可能的话，我希望能够修改文本并隐藏空白条目。

所以不是'BL'，我希望它显示'Black'，而不是'BLK'，我希望它显示'Blue'等

<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>

任何帮助表示赞赏？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

在获取时格式化或使用计算属性。

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

        ...

        return color
      })
    })
  }
}

或者

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

      ...

      return color
    })
  }
}

您还可以创建一个颜色映射并引用它，而不是多个 if 语句。

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

const colorName = colors['BLK']

【讨论】：

太感谢了！这也正是我一直在寻找的 :) 我会尝试两种方法，看看哪一种效果最好。

【解决方案2】：

尝试创建您的选项 Map，然后过滤和映射您的值：

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/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/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>

【讨论】：

太感谢了！这正是我想要的:)