Vue-Select: How to save all entries as lower case items?

Question

I am using the vue-select library. How can I force input entries to make all characters lower case? Right now, when I type the word "Baseball" into the input field, the tag is saved as "Baseball". I would like all tags to only keep a lower case version of the entry such as "baseball".

I have a sandbox here: https://stackblitz.com/edit/vue-ranqmt?file=src/App.vue

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

Answer 1

a - You could add a computed property which returns the lowercased version to use in whichever part of your app you need it to be.

computed: {
  selectedLowerCase() {
    return this.selected.toLowerCase();
  }
}

b - if you are using this for something like an API call, then you can turn the variable(s) into lowercase before submitting.

c - if you want the variable to appear as lowercase even in the input field you need to add the @input action to your input field and point it to a function to lowercase your input

  methods: {
    setSelected(value) {
      this.selected = this.selected.toLowerCase();
      console.log(value);
    },
  },