在vuetify组合框中如何将用户输入的每个字符转换为大写

Question

有人知道在 vuetify 组合框中如何将用户输入的每个字符或字母转换为大写。谢谢

我尝试了这些事件更改、输入和更新：搜索输入来获取组合框模型值并转换为大写，但它不起作用。

Answer 1

我认为获取搜索值的唯一方法是通过模板引用。然后就可以更新了

update:search

:

<template>
  <v-combobox
    ref="comboboxref"
    @update:search="turnSearchToUppercase"
  />
</template>
<script setup>
  const comboboxref = ref()
  const turnSearchToUppercase = () => {
    const search = comboboxref.value.search
    if (search) {
      comboboxref.value.search = search.toUpperCase()
    }
  }
</script>

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
      <v-app>
        <v-main>
          <v-combobox
            v-model="value"
            :items="items"
            ref="combo"
            @update:search="turnSearchToUppercase"
          />
        </v-main>
      </v-app>
  `,
  data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      value: 'foo',
  }),
  methods: {
    turnSearchToUppercase() {
      const search = this.$refs.combo?.search
      if (!search) {
        return
      }
      this.$refs.combo.search = search.toUpperCase()
    },
  },

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>