Vue JS - vue-class-component 바인딩 입력

Vue JS - vue-class-component 바인딩 입력

현재 컴포넌트 셋업을 위해 다음 라이브러리를 사용하여 TS와 함께 Vue 2 프로젝트를 진행하고 있습니다.vue-class-component그리고.vue-property-decorator

폼 컴포넌트를 작성해야 하는데 폼 컴포넌트에 data() 옵션을 사용하면 컴파일 시 오류가 발생하기 때문에 데이터 바인딩에 어려움을 겪고 있습니다.

data() 옵션을 사용하지 않고 입력 데이터를 바인드하는 방법이 있습니까?

표시되는 오류:

ERROR in /path/to/components/folder/Form.vue

Property 'id' does not exist in type 'Form'.

자세한 내용은 다음과 같습니다.

@Component
export default class Form extends Vue {
//Bind form data
data() {
    return {
        id: "",
        name: "",
        age: 0,
        amountA: 0,
        amountB: 0,
        capitalA: 0,
        capitalB: 0
    } 
}

onSubmit(e: any): void {
    e.preventDefault();
    //Create new class object
    const newClass = {
        id: this.id,
        name: this.name,
        age: this.age,
        amountA: this.amountA,
        amountB: this.amountB,
        capitalA: this.capitalA,
        capitalB: this.capitalB
    }

    //Emit the class object to parent component
    this.$emit("add-class", newClass);
    this.$emit("update-total");

    //Reset Form
    this.id = ""
    this.name = ""
    this.age = 0
    this.amountA = 0
    this.amountB = 0
    this.capitalA = 0
    this.capitalB = 0

}

콘솔 오류는 다음과 같습니다.콘솔 오류

누가 내가 이 오류에서 벗어날 수 있도록 도와줄 수 있나요?감사해요!

Vue 클래스의 컴포넌트 데코레이터에서는 옵션 API의data()함수가 추상화됩니다.

그@Componentdecorator는 Class API 구문에서 Options API 구문으로 코드를 변환하는 함수입니다.

즉, 무대 뒤에서:

• 모든 클래스 소품들이 로 바뀐다.data()리액티브 소품,
• 모든 게터/세터가 로 바뀝니다.computed소품
• 모든 클래스 메서드(일반 함수)가methods.

클래스 인스턴스에서 직접 소품을 선언합니다.

@Component
export default class Form extends Vue {
  id = "";
  name = "";
  age = 0;
  amountA = 0;
  amountB = 0;
  capitalA = 0;
  capitalB = 0;

  // props declared above are reactive and you can now use them
  // in getters or methods
}

Overview 페이지의 예를 참조하십시오.자세한 내용은 다음과 같습니다.

// 클래스 속성은 컴포넌트 데이터가 됩니다.

---

경고:Vue를 선택하기만 하면 Vue 클래스 데코레이터 구문이 사용률이 낮아지고 Vue 3 호환성 문제가 발생할 것으로 예상되므로 주의하시기 바랍니다.그들의 리포트에 있는 미해결 이슈를 보세요.

Vue 클래스 컴포넌트 데코레이터의 사용법을 참조하다Evan You의¹ 코멘트를 읽어보실 수도 있습니다.

공식 문서나 기본 툴링에서는 이 옵션이 더 이상 권장되지 않습니다(조만간 Vite 기반으로 전환되고 vue-cli가 유지 보수 모드로 전환됩니다).
권장 해제 여부는 실제 사용 현황과 프로젝트에 대한 @ktsn의 의도에² 따라 달라집니다.

¹ :: Vue의 저자
² :: 유지 보수자vue-class-component패키지

---

개인적인 조언: Vue 2 프로젝트에 @vue/composition-api를 설치하고 컴포넌트를 Composition API 구문으로 다시 쓰는 것이 클래스 데코레이터 구문에 쓰는 것보다 자신과 프로젝트 모두에 도움이 됩니다.

이렇게 하면

• 프로젝트를 Vue 3으로 비교적 쉽게 업그레이드할 수 있습니다.
• 컴포넌트 클래스 데코레이터의 구문과 회피책을 학습하는 것보다 더 유용한 컴포넌트 API를 학습한다(사용률이 낮아져 최종적으로 권장되지 않는다).

클래스 데코레이터 구문의 인기가 떨어지고 있기 때문에 시간이 지남에 따라 그 지원을 받기 어려워질 수 있습니다.

구성 API에서 기존 구성 요소를 다시 작성할 수 없는 경우 이 구문에 새 구성 요소를 적어도 쓸 수 있습니다. 구문은 점진적으로 채택할 수 있으므로 다른 유효한 Vue API 구문과 함께 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/70735541/vue-js-vue-class-component-binding-input