v-model vuej 대신 v-bind 및 v-on 사용

v-model vuej 대신 v-bind 및 v-on 사용

폼에서 입력을 처리하기 위해 v-model을 사용했는데, 소품 값을 바인딩하기 위해 변경해야 했습니다. 처음에 입력은 다음과 같았습니다.

<input type="text" class="form-control" placeholder="" v-model="username">

그리고 지금 보면

<input type="text" class="form-control" placeholder="" v-bind:value="modelData.username" v-on:input="username = $event.target.value">

modelData소품을 입고 옵니다.그리고 그것은 가지고 있다username.

모형을 사용하는 경우data, 나는 정의했다.

data: () => {
  return {
    username: ""
  }
},

잘 되고 있었는데 이렇게 바꾸고 나서v-bind그리고.v-on,

제 질문은 이제 어떻게 하면 이 가치를 얻을 수 있는가 하는 것입니다.username방법에서요? 예전처럼, 나는 그것을 얻고 있었어요.this.username값을 가져오고 클리어할 수도 있지만, 이제 사용자 이름을 얻는 방법은

methods: {}

입력 저장 버튼이 있습니다.

<button class="btn btn-secondary" type="button" @click="validateFormAndSave($event)">Save</button>

언제validateFormAndSave내가 가질 수 있는 전화를 받다this.username지금 당장 그 가치를 얻을 수 없을까?하지만 Vue Doc에 따르면v-model그리고.v-bind:value&v-on:input똑같아요?

갱신:

사용자 이름에는 이미 값이 있을 수도 있고 있을 수도 없습니다.props가치, 그래서v-on:input="username = $event.target.value"이미 입력된 값이 아니라 새로 입력한 값만 얻을 수 있습니까?아니면 편집할까요?왜 그럴까? 누가 입력했는지 아니면 이미 입력했는지 알 수 있는 방법은 없을까?

갱신:

이건 너무 애매해졌어요.그래서 일단은. 1.설정할 수 있습니다.v-bind:value그러나 편집하지 않고는 메서드로 얻을 수 없습니다.2 .이것은 설정할 수 없습니다.이것 또한 입력에서 삭제되지 않습니다. 3. @input은 새로 입력한 것만 가져옵니다. 이미 입력된 것은 없습니다.

v-model은 =에 대한 구문설탕일 뿐입니다.>

:value="modelValue" @input="modelValue = $event.target.value"

다른 것을 원한다면, 그것은 매우 쉽다.업데이트 쪽을 onInput으로 변경하기만 하면 =

<input  class="form-control
    :value="username" 
    @input="username = $event.target.value" >
data: () => {
  return {
    username: ""
  }
},
mounted() 
{ 
  this.username = this.modelData.username;
},
methods:{
  consoleUsername() {
    console.log(this.username);
  }
}

가장 좋은 해결책은 소품에서 데이터를 가져오고 데이터를 로딩하는 경우입니다.v-models.

사용.watchVue 컴포넌트의 기능.

일단 소품을 추가해서

  export default {
    props: ["vendorModelData"],

그리고 나서 나는 그것을 통과시켜watch로.v-model

watch: {
  vendorModelData() {
    this.updatePropsValue(this.vendorModelData)
    console.log("data updated")
  }
},

이렇게 하면 Propos가 변경되면 항상 다르게 로딩됩니다.이 방법으로 나는 이용하게 되었다.v-model소품에서 데이터를 로딩할 수 있습니다.

나는 그것이 나에게 유용하다는 것을 알았다.

언급URL : https://stackoverflow.com/questions/54782010/using-v-bind-and-v-on-instead-of-v-model-vuejs