NumericTextField를 사용할 때 "프롭을 직접 변환하지 않음"이 표시되는 이유는 무엇입니까?

NumericTextField를 사용할 때 "프롭을 직접 변환하지 않음"이 표시되는 이유는 무엇입니까?

VueJS에서 단순 보기 구성 요소를 생성했는데 일반적인 오류가 발생했습니다.

상위 구성 요소가 다시 나타날 때마다 값이 덮어쓰므로 프롭을 직접 변환하지 않습니다.대신, 프롭 값을 기반으로 데이터 또는 계산된 속성을 사용합니다.변환 중인 특성: "값"

내 코드는 다음과 같습니다.

<template>
    <numeric-text-field class="mx-auto" label="Head Mass" units="kg" v-model="turbine.head_mass" />
</template>

<script>
import NumericTextField from '@/components/common/NumericTextField'
export default {
  name: 'Turbines',
  components: {
    NumericTextField
  },
  data () {
    return {
      turbine: {}
    }
  }
}
</script>

<style scoped>
</style>

이상하게도 "값"을 수정하는 오류가 발생하지만 코드에 값이 없습니다.이것은 숫자 텍스트 필드에 의해 생성된 간접 레이어에 의해 발생한다고 생각합니다.일반적인 입력 텍스트만 사용할 때는 코드에 이 문제가 없습니다.이게 무슨 일입니까?v-model 이외에 모델을 숫자 텍스트 필드에 연결하는 특별한 방법이 있습니까?

이것은 원래 게시되었을 때 저에게 알려지지 않은 것으로 밝혀졌고, 숫자 텍스트 필드에서 문제가 되었습니다.저는 그것이 표준 Vueify 구성 요소인 줄 알았는데 동료가 추가했습니다.원본 게시물 댓글에서 지적한 양방향 입력을 제대로 처리하지 못했습니다.

요령은 이것을 추가하는 것입니다.@input에 있는 NumericTextField 구성 요소의 $emit('input', value)은 Ohgodwhy suspended와 같습니다.

Vue에서 소품이 어떻게 작동하는지 이해하는 것이 중요합니다.여기서 핵심적인 측면은 단방향 데이터 흐름을 위해 소품이 활용된다는 것입니다.양방향 데이터 흐름으로 사용하려면 대신v-model.

그렇긴 하지만, 여러분이 이것을 할 수 있는 몇 가지 다른 방법이 있습니다.저는 이런 것들에 컴퓨터 속성을 활용하는 것을 선호합니다!꽤 깨끗하고 코드를 따라가기 쉽습니다.

프롭을 직접 수정하는 대신에,numeric-text-field값이 변경되면 대신 이벤트를 내보내야 합니다.이것이 당신의 방식입니다.Turbines.vue다음과 같이 표시:

<template>
    <numeric-text-field class="mx-auto"
    label="Head Mass"
    units="kg"
    :headMass="turbine.head_mass"
    v-on:updateHeadMass="updateHeadMass"/>
</template>

<script>
import NumericTextField from '@/components/common/NumericTextField'
export default {
  name: 'Turbines',
  components: {
    NumericTextField
  },
  data () {
    return {
      // You should consider initializing your data with the structure that matches what you expect, instead of an empty object
      turbine: {
        head_mass: ""
      }
    }
  },
  methods: {
    updateHeadMass(value) {
      this.turbines.head_mass = value;
    }
  }
}
</script>

<style scoped>
</style>

당신은 알아차릴 것입니다.v-on:updateHeadMass기여하다.이렇게 하면 하위 구성 요소에서 발생하는 이벤트를 수신할 수 있습니다.그 때.updateHeadMass발생하더라도 특정 함수를 호출하고 그에 따라 상위 구성 요소의 데이터를 업데이트할 수 있습니다.그러면 하위 구성 요소가 반응적으로 변경되고 업데이트됩니다.

숫자 텍스트 필드 내부

속성을 직접 수정하는 대신 입력이 변경될 때 상위 구성 요소까지 이벤트를 내보내는 계산된 속성을 사용합니다.NumericTextField구성 요소 표시:

<template>
  <div>
    <label for="headMass">Head Mass</label>
    <input type="text" v-model="localHeadMass"  name="headMass"/>
  </div>
</template>

<script>
export default {
  name: "numeric-text-field",
  computed: {
    localHeadMass: {
      get() {
        return this.headMass;
      },
      set(value) {
        // Now, anytime we change this property, our parent receives the new value and updates the `headMass` prop!
        this.$emit("updateHeadMass", value);
      }
    }
  },
  props: {
    headMass: {
      type: String,
      default: "0",
      required: true
    }
  }
};
</script>

<style scoped>
</style>

위의 접근 방식이 마음에 들지 않으면 대신 다음과 같은 감시자를 사용할 수 있습니다.

<template>
  <div>
    <label for="headMass">Head Mass</label>
    <input type="text" v-model="localHeadMass" v-on:change="updateHeadMass" name="headMass"/>
  </div>
</template>

<script>
export default {
  name: "numeric-text-field",
  data: () => {
    return {
      localHeadMass: ""
    };
  },
  props: {
    headMass: {
      type: String,
      default: "0",
      required: true
    }
  },
  methods: {
    updateHeadMass() {
      this.$emit("updateHeadMass", this.localHeadMass);
    }
  },
  watch: {
    headMass(value) {
      this.localHeadMass = value;
    }
  }
};
</script>

<style scoped>
</style>

언급URL : https://stackoverflow.com/questions/55215671/why-do-i-get-avoid-mutating-a-prop-directly-when-using-numerictextfield