Vue-Select如何强制所有输入的标签条目转为小写格式保存

问题说明 #

使用taggable模式的vue-select组件时，输入带大写字符的文本（例如Baseball），生成的标签会原样保留输入格式存储，需要实现所有新建标签自动转为小写格式存储，例如输入Baseball最终存储值为baseball。

可复现问题的在线环境

原始复现代码 #

<template>
  <div id="app">
    <h3>Vue Select</h3>
    <v-select
      v-model="selected"
      taggable
      multiple
      :options="options"
      @input="setSelected"
    ></v-select>
    <br /><br />
    selected: <br />
    <pre>{{ selected }}</pre>
  </div>
</template>

<script>
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
export default {
  name: 'App',
  components: {
    'v-select': vSelect,
  },
  data() {
    return {
      selected: null,
      options: [],
    };
  },
  methods: {
    setSelected(value) {
      console.log(value);
    },
  },
};
</script>

实现方法 #

直接使用组件提供的createOption属性自定义新建标签的生成逻辑，在标签创建环节就完成小写转换，不需要额外监听输入事件做二次处理，不会出现原值闪回的问题。

修改后代码 #

<template>
  <div id="app">
    <h3>Vue Select</h3>
    <v-select
      v-model="selected"
      taggable
      multiple
      :options="options"
      :create-option="createCustomOption"
    ></v-select>
    <br /><br />
    selected: <br />
    <pre>{{ selected }}</pre>
  </div>
</template>

<script>
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
export default {
  name: 'App',
  components: {
    'v-select': vSelect,
  },
  data() {
    return {
      selected: null,
      options: [],
    };
  },
  methods: {
    createCustomOption(inputValue) {
      // 去除首尾空格后统一转小写
      return inputValue.trim().toLowerCase();
    }
  },
};
</script>

补充说明 #

• 逻辑中增加了trim()处理，可自动过滤输入内容首尾的无效空白字符
• 转换后的值和已有选项格式完全统一，组件自带的去重逻辑会自动拦截大小写不同但内容一致的重复标签，不需要额外写去重判断

内容的提问来源于stack exchange，提问作者redshift