javascript - Vue.js 계산 속성의 set 메소드를 사용한 후 계산 속성의 값을 그에 따라 어떻게 업데이트할 수 있습니까?

Question

계산됨: {

으아악

}

cardNum을 입력의 v-model에 바인딩하고 이를 사용하여 값을 필터링하고 싶었습니다(vue.js2.0 이후에는 v-model의 변수에 필터를 바인딩할 수 없습니다). 20자를 초과하면 this.ruleForm.cardNum이 가로채기는 하겠지만 CardNum은 20자를 초과할 수 있습니다. 이 문자 길이 제한 기능을 구현하는 방법을 알려주시겠습니까?

Answer 1

주로 응용 시나리오와 아이디어의 문제인 것 같아요.

1. 신청 시나리오: 일반적으로 포커스가 사라지거나 사용자가 확인 및 저장 버튼을 클릭하면 양식 확인이 완료되고 해당 카피라이팅 프롬프트가 팝업됩니다. 이렇게 제한하면 상호작용이 충분히 우호적이지 않게 되고 구현 아이디어에 편차가 발생하게 됩니다.

2. 생각하기: computed和v-model의 이해를 위해 이렇게 사용하는 것은 권장하지 않습니다. v-model 자체는 양방향 바인딩을 달성하도록 설계되었으며 계산을 사용한다는 것은 하나의 설정 방법과 하나의 중간 값을 더 작성하는 것을 의미합니다.

정말 이루고 싶다면 이렇게 해보세요

으아악 으아악

Answer 2

이것이 귀하의 요구 사항을 충족하는지 모르겠습니다

으아악

Answer 3

이렇게 하면 수동으로 트리거하지 않는 한 계산된 속성의 setter가 트리거되지 않습니다. (vm)this.cardNum = 'what?'
문서 보기

또는 다음과 같이 vue에서 제공하는 watcher를 직접 사용할 수도 있습니다.

으아악

하지만 권장하지는 않습니다