vue.js에서 항상 대문자로 표시된 입력을 작성하려면 어떻게 해야 합니까?

vue.js에서 항상 대문자로 표시된 입력을 작성하려면 어떻게 해야 합니까?

vue.js를 사용하여 폼을 만들고 있는데 vue에서 항상 대문자로 표시된 입력을 생성해야 합니다.css 속성을 사용할 수 있습니다.

text-transform: uppercase;

전송하기 전에 데이터를 변환합니다.

data.someData.toUpperCase()

하지만 vue.js에서 더 지능적인 방법이 있을까요?반응으로 우리는 제어된 입력을 생성하고 쉽게 실행할 수 있습니다.Vue.js에도 그런 게 있나요?

계산 필드를 사용하여 작업을 수행했지만 폼의 각 입력에 대해 계산된 getter와 setter를 작성해야 합니다.더 좋은 방법이 있을까요?

커스텀 디렉티브를 작성할 수 있습니다.

Vue.directive( 'touppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

그런 다음 필요한 곳에 사용하세요.예를 들어 다음과 같습니다.

<input type="text" v-model="modelfield" v-touppercase>

실행할 코드가 많지 않기 때문에 이벤트를 텍스트 필드에 수동으로 바인드한 다음 해당 텍스트 필드에서 상위 대소문자를 처리해야 합니다.

텍스트 필드의 이벤트를 처리하려면input이벤트 핸들러에서 초기 상태를 다시 업데이트합니다.

<input :value="text" @input="updateText($event.target.value)"/>

export default {
    data() {
        return {
            text: '',
        }
    },
    methods: {
        updateText(newValue) {
            this.value = newValue.toUpperCase();
        },
    }
}

템플릿에서 인라인으로 할 수도 있지만 코드 스타일 설정에 따라 읽기 어려울 수 있습니다.

<input :value="text" @input="text = $event.target.value.toUpperCase()"/>

이 지시는, 다음과 같이 동작합니다.v-model(마지막 문자도 대문자로 표시):

Vue.directive('uppercase', {
  update(el) {
    const sourceValue = el.value;
    const newValue = sourceValue.toUpperCase();

    if (sourceValue !== newValue) {
      el.value = newValue;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    }
  },
});

사용방법:

<input type="text" v-model="myField" v-uppercase />

다음과 같이 할 수 있습니다.

<input :value="theValue" @input="theValue = theValue.toUpperCase()"/>

asologor의 답변을 수정하기 위해 vuetify에서 그것을 변경하기 위해 입력 요소에 도달해야 한다.

Vue.directive("uppercase", {
    update(el) {
        const sourceValue = el.getElementsByTagName("input")[0].value
        const newValue = sourceValue.toUpperCase()

        if (sourceValue !== newValue) {
            el.getElementsByTagName("input")[0].value = newValue
            el = el.getElementsByTagName("input")[0]
            el.dispatchEvent(new Event("input", { bubbles: true }))
        }
    }
})

용도는 다음과 같습니다.

 <v-text-field
              type="text"
              outlined
              placeholder="placeholder"
              v-model="name"
              prepend-inner-icon="edit"
              v-uppercase
            />

이것은 확실히 효과가 있다

언급URL : https://stackoverflow.com/questions/54578232/how-do-i-go-about-creating-an-always-capitalized-input-in-vue-js