VueJS 2에서 직접 프로펠러를 변형하지 마십시오.

VueJS 2에서 직접 프로펠러를 변형하지 마십시오.

우선, 나는 이제 막 VueJS를 가지고 놀기 시작했기 때문에, 이것은 여기에서 제안된 VueJS 버전일 수 없다.

의 중복일 수 있음:

• [Vue 경고] 해결 방법: vue.js 2에서 값을 덮어쓰게 되므로 프로펠러를 직접 변경하지 마십시오. - 다른 점은 다음 값만 설정하려고 한다는 것이다.v-bind한 번.
• 값을 덮어쓰게 되므로 받침대를 직접 변경하지 마십시오. 이 값도 비슷해 보이지만 해결책은 효과가 없었다.
• Javascript를 통해 VUE 구성 요소를 수정하는 것이 올바른 방법은 무엇인가? - 이 솔루션은 내 경우와 거의 비슷해 보인다.
• 하위 구성 요소에서 상위 데이터 업데이트

내 문제는 이렇게 생긴 내 HTML에서 시작된다.

<div id="app">
  <div class="row">
    <div class="form-group col-md-8 col-md-offset-2">
      <birthday-controls
       :birthDay="birthDay"
       :birthMonth="birthMonth"
       :birthYear="birthYear">
      </birthday-controls>
    </div>
  </div>
</div>

및 JS:

Vue.component('birthday-controls', {

    template: `<div class="birthday">
    <input type="text" name="year"  placeholder="yyyy" v-model="birthYear" size="4" maxlength="4"/>
    <input type="text" name="month" placeholder="mm" v-show="validYear" v-model="birthMonth" size="3" maxlength="2"/>
    <input type="text" v-show="validYear && validMonth" name="day" placeholder="dd" v-model="birthDay" size="2" maxlength="2"/>
  </div>`,

    props: ['birthDay', 'birthMonth', 'birthYear'],

    computed: {
        validYear: function() {
            return (this.birthYear > new Date().getFullYear()-100 && this.birthYear < new Date().getFullYear()-14)
        },
        validMonth: function() {
            return (this.birthMonth > 0 && this.birthMonth <= 12)
        },
        validDay: function() {
            return (this.birthDay > 0 && this.birthDay <=31) //I have to add more checking here for february, leap years and ....
        }
    }

});

new Vue({
    el: '#app',

    data: function() {
        return {
            birthDay: "",
            birthMonth: "",
            birthYear: ""
        }
    },

});

나는 여기에 codepen을 준비했다: http://codepen.io/AngelinCalu/pen/OpXBay

그러나 여기서 나온 두 번째 답은 다음과 같다: vuejs 업데이트 자식 구성 요소에서 부모 데이터를 업데이트하면 내가 뭔가를 놓치고 있다는 것을 깨닫게 된다.

그 예에서 그것은 다음을 설정한다.this.$emit('increment')특정 이벤트에서 트리거하는 방법 중 하나 내에서.

이 다른 예에서: .vue 웹 팩(vue2)을 사용하여 vue.js의 아버지 구성 요소로 자녀의 데이터 구성 요소를 업데이트하십시오. 이 답변은 다음 구성 요소를 추가하는 것을 제안한다.watch변화를 발산하기 위해서.

  watch: {
    val() {
      this.$emit('title-updated', this.val);
    }
  }

이제 난 더 혼란스러워!이 문제를 해결하는 올바른 방법(또는 최선의 방법)은 무엇인가?

참고: 처음에 제거할 경우html:

   :birthDay="birthDay"
   :birthMonth="birthMonth"
   :birthYear="birthYear"

여전히 예상대로 작동하지만 부에가 경고하는 것을 듣고 있다. 하지만 만약 내가 여기서부터 그 방법을 따르고 있다면: https://stackoverflow.com/a/41901150/2012740,은 작동을 멈추지만, 나는 아무런 오류도 받지 않는다.

내 업데이트된 코드: https://jsfiddle.net/angelin8r/647m7vdf/

결론:처음부터 기능성이 필요하지만, 기능성은 없다.[Vue warn]

이것이 내가 처음의 예에서 얻은 것이다.

[부유 경고]:상위 구성 요소를 다시 렌더링할 때마다 값을 덮어쓰므로 프로펠러를 직접 변경하지 마십시오.대신, 프로펠러 값에 기반한 데이터 또는 계산된 속성을 사용하십시오.변형된 소품: "생년"

경고는 설정의 결과물이다.v-model당신의 재산의 가치에 맞추어.그 이유는 만약 당신이 구성 요소 밖에서 생년월월월일 또는 생년월일을 변경한다면, 그 구성 요소 안에 현재 있는 값이 무엇이든 즉시 덮어쓰게 되기 때문이다.

대신 복사본을 캡처하십시오.

Vue.component('birthday-controls', {

    template: `<div class="birthday">
    <input type="text" name="year"  placeholder="yyyy" v-model="internalBirthYear" size="4" maxlength="4"/>
    <input type="text" name="month" placeholder="mm" v-show="validYear" v-model="internalBirthMonth" size="3" maxlength="2"/>
    <input type="text" v-show="validYear && validMonth" name="day" placeholder="dd" v-model="internalBirthDay" size="2" maxlength="2"/>
  </div>`,

    props: ['birthDay', 'birthMonth', 'birthYear'],

    data(){
      return {
        internalBirthDay: this.birthDay,
        internalBirthMonth: this.birthMonth, 
        internalBirthYear: this.birthYear
      }
    },

    computed: {
        validYear: function() {
            return (this.internalBirthYear > new Date().getFullYear()-100 && this.internalBirthYear < new Date().getFullYear()-14)
        },
        validMonth: function() {
            return (this.internalBirthMonth > 0 && this.internalBirthMonth <= 12)
        },
        validDay: function() {
            return (this.internalBirthDay > 0 && this.internalBirthDay <=31) //I have to add more checking here for february, leap years and ....
        }
    }

});

당신은 거의 정확하게 당신의 바이올린에서 이것을 했지만 계산된 값을 수정하지 않았다.

computed: {
    validYear: function() {
        return (this.birthYear > new Date().getFullYear()-100 && this.birthYear < new Date().getFullYear()-14)
    },
    validMonth: function() {
        return (this.birthMonth > 0 && this.birthMonth <= 12)
    },
    validDay: function() {
        return (this.birthDay > 0 && this.birthDay <=31) //I have to add more checking here for february, leap years and stuff
    }
},

그래야 한다

computed: {
    validYear: function() {
        return (this.var_birthYear > new Date().getFullYear()-100 && this.var_birthYear < new Date().getFullYear()-14)
    },
    validMonth: function() {
        return (this.var_birthMonth > 0 && this.var_birthMonth <= 12)
    },
    validDay: function() {
        return (this.var_birthDay > 0 && this.var_birthDay <=31) //I have to add more checking here for february, leap years and stuff
    }
},

참조URL: https://stackoverflow.com/questions/42614242/avoid-mutating-a-prop-directly-in-vuejs-2