Vue 컴포넌트의 메서드에서 소품 값을 변경할 수 있습니까?

Vue 컴포넌트의 메서드에서 소품 값을 변경할 수 있습니까?

저는 컴포넌트를 가지고 있으며 543의 값을 소품으로 전달합니다: prop-room-selected,

<navigation-form :prop-room-selected='543'>
</navigation-form>

이제 버튼 클릭 한 번으로 update Coach Status 함수를 호출하여 prop Room Selected 값을 변경하려고 하는데 소품 값이 업데이트되지 않습니다.

{
    template: '#navigation-form',
    props: ['propRoomSelected'],
    data: function () {
      return {
        roomSelected: this.propRoomSelected,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.propRoomSelected = 67;
      }
  }
}

기능에서 소품의 가치를 어떻게 바꾸는지 모르겠어요.Vue에서 소품 가치 업데이트가 가능한가요?

Vue에서(콘솔에서) 경고를 발생시킵니다.

[Vue warn] :상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변환되는 프로펠러: "prop Room Selected"

값은 실제로 컴포넌트 내부에서 변경되지만 컴포넌트 외부에서는 변경되지 않습니다.상위 속성 값은 구성 요소 내에서 변경할 수 없으며, 실제로 상위 속성이 어떤 이유로든 다시 렌더링되면 업데이트된 값이 손실됩니다.

상위 속성을 업데이트하려면$emit갱신된 값과 부모 변경 내용을 수신합니다.

Vue.component("navigation-form",{
    template: '#navigation-form',
    props: ['propRoomSelected'],
    data: function () {
      return {
        roomSelected: this.propRoomSelected,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.$emit("update-room-selected", 67) ;
      }
  }
})

그리고 부모 템플릿에서 이벤트를 듣습니다.

<navigation-form :prop-room-selected='propRoomSelected'
                 @update-room-selected="onUpdatePropRoomSelected">
</navigation-form>

여기 예가 있습니다.

이것은 일반적인 패턴이며 Vue는 명령어를 구현하여 이 명령어를 약간 더 쉽게 사용할 수 있도록 했습니다.v-model다음 컴포넌트는 다음을 지원합니다.v-model같은 일을 하게 될 거야

Vue.component("navigation-form-two",{
    template: '#navigation-form-two',
    props: ['value'],
    data: function () {
      return {
        roomSelected: this.value,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.$emit("input", 67) ;
      }
  }
})

그리고 부모 템플릿에서

<navigation-form-two v-model="secondRoomSelected">

기본적으로 컴포넌트가 지원해야 합니다.v-model당신은 a를 받아들여야 한다.value프로퍼티$emit그inputevent. 위에 링크된 예에서도 동작하고 있습니다.

또 하나의 접근법은computed소품 취급 특성:

{
  template: '#navigation-form',
  props: ['propRoomSelected'],
  data () {
    return {
      roomSelected: this.computedRoomSelected,
      changeableRoomSelected: undefined
    }
  },
  computed: {
    computedRoomSelected () {
      if (this.changeableRoomSelected !== undefined) {
        return this.changeableRoomSelected
      }
      return this.propRoomSelected
    }
  },
  methods: {
    updateCoachStatus (event) {
      this.changeableRoomSelected = 67
    }
  }
}

언급URL : https://stackoverflow.com/questions/43701175/is-it-possible-to-change-props-value-from-method-in-vue-component