VUE.JS + 부트스트랩 - 같은 입력의 첫 글자를 대문자로 표시하는 방법

VUE.JS + 부트스트랩 - 같은 입력의 첫 글자를 대문자로 표시하는 방법

쓰기 시작할 때 첫 글자를 대문자로 입력해 주세요.

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

이것도 필터가 있어요.그렇지만v-model="formSurname | capitalize"내가 시도했던 것은 작동하지 않는다.:value="formSurname | capitalize"근데 잘 안 돼요

Vue.filter("capitalize", function (value) {
    if (!value) 
        return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
});

첫 글자를 실시간으로 변경하려면 어떻게 입력합니까?

값을 대문자와 함께 저장해야 하는 경우 set 및 get 메서드를 사용하여 계산된 속성을 사용합니다.

computed: {
 formSurnameCapital: {
    get: function () {
      return this.formSurname;
    },
    // setter
    set: function (newSurname) {
      if(newSurname.length < 1) {this.formSurname = ''; return}
      this.formSurname = newSurname.replace(/^./, newSurname[0].toUpperCase());
    }
  }
}

템플릿에는 다음과 같은 내용이 있습니다.

<b-form-input v-model="formSurnameCapital" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

또는 대문자로만 표시하는 경우 css를 사용할 수 있습니다.

.toCapitalFirst {
  text-transform: capitalize;
}

를 갱신할 수 있습니다.formSurname에서keyup의 이벤트methods

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required @keyup="formatSurname"> </b-form-input>

그리고 방법:

formatSurname() {
  if (this.formSurname) {
    this.formSurname = this.formSurname.toString()
    this.formSurname = this.formSurname.charAt(0).toUpperCase() + this.formSurname.slice(1)
  }
}

언급URL : https://stackoverflow.com/questions/62696271/vue-js-bootstrap-how-to-capitalize-first-letter-in-the-same-input