Vue-Select:如何将所有条目保存为小写项目?

Question

我正在使用vue-select库。我如何强制输入条目使所有字符小写?现在，当我输入"棒球"这个词时;在输入字段中，标记被保存为"baseball"。我希望所有标记只保留条目的小写版本，例如"baseball"

我在这里有一个沙盒: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 -你可以添加一个计算属性，返回小写版本，以便在应用程序的任何部分使用。

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

b -如果你在API调用之类的地方使用它，那么你可以在提交之前将变量转换为小写。

c—如果您希望变量即使在输入字段中也显示为小写，您需要将@input操作添加到输入字段并将其指向一个函数以小写您的输入

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