Vue2 - Vanilla ONKEYPRESS 함수를 메서드로 변환

Vue2 - Vanilla ONKEYPRESS 함수를 메서드로 변환

에 입력되는 문자 수를 제한하려고 합니다.content editablediv를 클릭합니다.

이렇게 하면 올바르게 동작합니다.

<div onkeypress="return (this.innerText.length >= 140 ? false : true )">

단, Vue 방식(단일 파일 구성 요소)으로 실행해야 합니다.다음 작업을 수행하려고 하지만 작동하지 않습니다.

<div @keypress="limitTextChar">

// data
props: {
    limitText: {
        type: Boolean,
        default: false
    },
    limitLength: {
        type: Number,
        default: 140
    }
}

limitTextChar(event) {
    return this.limitText && event.target.innerText.length >= this.limitLength ? false : true
}

내가 어디가 잘못됐지?

전체 컴포넌트의 JSBIN: https://jsbin.com/pezetuxecu/edit?js

전화하셔야 합니다.preventDefault()당신의 논리에 따라 사건을 해결합니다.예를들면

limitTextChar(event) {
  if (this.limitText && event.target.innerText.length >= this.limitLength) {
    event.preventDefault()
  }
}

---

또 하나 주의해야 할 점은 스트링 이외의 템플릿에서 사용할 경우 케밥케이스를 사용해야 한다는 것입니다.

<editable :limitText="true"...

그럴 것 같네요.

<editable :limit-text="true"

데모 ~ https://jsfiddle.net/yo5o0vwt/

언급URL : https://stackoverflow.com/questions/46107323/vue2-convert-vanilla-onkeypress-function-to-method