VUE에서 소품과 함께 v-model 사용.JS

VUE에서 소품과 함께 v-model 사용.JS

v-model에서 프로펠러에서 가져온 데이터를 사용하려고 합니다. 다음 코드가 작동하지만 주의 사항이 있습니다.

<template>
<div>
       <b-form-input v-model="value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';
    export default {
        props: {
            value: String
        },
        methods: {
            postPost() {
                axios.put('/trajectory/inclination', {
                    body: this.value
                })
                    .then(response => {
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            }
        }
    }
</script>

경고는 다음과 같습니다.

"부모 컴포넌트가 다시 렌더링될 때마다 값이 덮어쓰기되므로 직접 프롭을 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변형되는 프로펠러: "가치"

그래서 바꿨고 지금은 경고문대로 데이터를 사용하고 있습니다.

<template>
<div>
       <b-form-input v-model="_value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';

    export default {
        props: {
            value: String
        },
        data() {
            return {
                _value: this.value
            }
        },
        methods: {
            postPost() {
                axios.put('/trajectory/inclination', {
                    body: this._value
                })
                    .then(response => {
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            }
        }
    }

이제 코드가 작동하지 않고 경고가 다음과 같이 표시됩니다.

속성 또는 메서드 "_value"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.반드시 데이터 옵션에 사후 대응 데이터 속성을 선언하십시오."

경고를 억제할 첫 번째 코드를 어떻게 고칠지 아는 거 있어?(혹은 두 번째 코드를 수정하는 방법에 대해 알고 계십니까?)

관찰: b-form-input은 내 컴포넌트가 아닙니다.이것은 Boostrap-Vue로부터의 텍스트 입력입니다(b-form-input의 경우 Doc).

답변은 https://github.com/vuejs/vue/issues/7434에서 보내드립니다.

소품은 읽기 전용이지만 v-model을 사용하여 소품 값을 변경하려고 합니다.이 경우 입력 값을 변경하면 프로포트가 수정되지 않고 다음 업데이트 시 값이 복원됩니다.

대신 데이터 속성 또는 계산된 세터를 사용하십시오.

computed: {
  propModel: {
    get () { return this.prop },
    set (value) { this.$emit('update:prop', value) },
  },
},

https://vuejs.org/v2/guide/computed.html#Computed-Setter

버트는 당신의 직접적인 문제를 다루지만, 당신의 접근 방식이 좀 이상하다는 것도 알아야 할 것 같습니다.최종적으로는 새로운 값을 다음 주소로 전송하기 때문입니다.postPost로컬 복사는 변경할 필요가 없습니다.를 사용합니다.event에 송신되는 오브젝트change핸들러를 사용하여 입력에서 현재 값을 가져옵니다.

대신v-model, 사용만 하면 됩니다.:value를 지정할 때 호출 괄호를 포함하지 마십시오.change핸들러

<template>
<div>
       <b-form-input :value="value" @change="postPost"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';
    export default {
        props: {
            value: String
        },
        methods: {
            postPost(event) {
                axios.put('/trajectory/inclination', {
                    body: event.target.value
                })
                    .then(response => {
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            }
        }
    }
</script>

_ 접두사 속성은 Vue의 내부 속성용으로 예약되어 있습니다.

_ 또는 $로 시작하는 속성은 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로 Vue 인스턴스에서 프록시되지 않습니다.

_value를 밑줄로 시작하지 않는 값으로 변경해 보십시오.

일반적인 회피책 중 하나는 데이터 변수를 도입하고 변수를 업데이트하기 위한 소품을 확인하는 것입니다.이것은 매우 미묘하고 틀리기 쉬우므로 Vuetify 모달의 예를 다음에 나타냅니다.v-model기법이 .)<input>（ ） :

<template>
  <v-dialog v-model="isVisible" max-width="500px" persistent>
  </v-dialog>
</template>

<script>
export default {
  name: 'Blablabla',
  props: {
    visible: { type: Boolean, required: true }
  },
  data() {
    isVisible: false
  },
  watch: {
    // `visible(value) => this.isVisible = value` could work too
    visible() {
      this.isVisible = this.$props.visible
    }
  }
}
</script>

이할 수 있는 에서 Vue 사용 방법을 합니다.v-model커스텀 컴포넌트:https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

TL;DR:

으로 이름만 요.valueinput★★★★★★★★★★★★★★★의 이벤트v-model컴포넌트 맵을 인스턴스화할 때 사용합니다.

위의 링크에서의 동작에 대한 상세 정보.

<template>
  <input
    type="text"
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>

<script>
export default {
  name: "Input",
  props: {
    value: String,
  },
};
</script>

<Input v-model="searchText"></Input>

를 "v-model"이라는 데이터 .value_하지 않는 )_ ★★★★★★★★★★★★★★★★★」$Vue v 、 Vue v 、 Vue v 、 Vue v v v v v v v v v v v v v v속성의 을 "Data Property"로 설정합니다.null 다음, '하다'라는 해 주세요.getValue()에, 이 정해집니다.value_의 에에에 value콜을 합니다.getValue() Vue's에서created()다음과 같이 합니다.

<template>
  <div>
    <b-form-input v-model="value_" @change="postPost()">
    </b-form-input>
  </div>
</template>

<script>
  import axios from 'axios';
  
  export default {
    data: () => ({
      value_: null
    }),
    props: {
      value: String
    },
    methods: {
      postPost() {
        axios.put('/trajectory/inclination', {
          body: this.value_
        })
        .then(response => {
        })
        .catch(e => {
          this.errors.push(e)
        })
      },
      getValue() {
        this.value_ = this.value;
      }
    },
    created() {
      this.getValue()
    }
  }
</script>

다음과 같은 데이터를 사용할 수 있습니다.

<template>
  <input type="text" v-bind:value="value" v-on:input="dValue= $event.target.value" />
</template>
        
 <script>
 export default {
  props: ["value"],
  data: function () {
    return {
      dValue: this.value,
    };
  },
  methods: {
    alertValue() {
     alert("Current Value" + this.dValue);
    },
  },
};
</script>

언급URL : https://stackoverflow.com/questions/46164374/using-v-model-with-a-prop-on-vue-js