@워치 데코레이터가 활성화되지 않음

@워치 데코레이터가 활성화되지 않음

간단한 테스트 컴포넌트가 있습니다.템플릿은 다음과 같습니다.

<template>
  <div>
    <input type="text" v-model="name" class="form-control">
    <h5>{{ message }}</h5>
  </div>
</template>
<script src="./test.ts" lang="ts"></script>

TypeScript 컴포넌트는 다음과 같습니다.

declare var Vue: typeof Function;
declare var VueClassComponent: any;

import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator";

@VueClassComponent.default({
  template: require("./test.vue"),
  style: require("./test.sass"),
  props: {
    name: String,
    num: Number
  }
})
export default class TestComponent extends Vue {
  name: string;
  num: number;
  message: string = "";

  @Watch("name")
  protected onNameChanged(newName: string, oldName: string): any {
    console.log("setting " + oldName + " to " + newName);
  }

  mounted(this: any): void {
    console.log("mounted called");
    this.message = "Hello " + this.name + " " + this.num;
  }
}

를 입력했을 때input@Watch("name") 핸들러는 부팅되지 않습니다만, 이러한 에러는,console:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name" 

에 입력된 문자마다 1회input박스. 어디에도 세팅이 안 돼서 어디에도 세팅이 안 돼 있어요.(이름 갱신)이 제 목표입니다만, 단순히 값을 직접 변경할 수 있는 것은 아니고, @Watch 핸들러를 설정하고, 그 외의 장소에 설정할 필요가 있다고 들었습니다(아직은 그 방법을 정확히 알 수 없지만, 현시점에서는 입수할 수 없습니다).

우리의 논의를 바탕으로, 이 문제의 근원은name소유물로써.의도한 것은 이다.name내부적 가치로, 단순히 그 가치를 도출하는 데 사용되었을 뿐이죠.message그렇다면 시계는 불필요하고 계산으로 할 수 있다.

declare var Vue: typeof Function;
declare var VueClassComponent: any;

import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator";

@VueClassComponent.default({
  template: require("./test.vue"),
  style: require("./test.sass"),
  props: {
    num: Number
  }
})
export default class TestComponent extends Vue {
  name: string;
  num: number;

  get message(){
      return "Hello " + this.name + " " + this.num;
  }
}

언급URL : https://stackoverflow.com/questions/43097825/watch-decorator-not-activating