Vue.js 바인딩 개체 속성

Vue.js 바인딩 개체 속성

Vue에서 개체 속성을 바인딩할 수 없는 이유는 무엇입니까? '''」addr하는 것은 , 「즉시 반응합니다」test★★★★★★★★★★★★★★★★★★★?이경 어떻 ?떻 어? ???

HTML

<div id="app">

   <input type="text" id="contactNum" v-model="addr.contactNum" name="contactNum">

   <input type="text" id="test" v-model="test" name="test">
   <br/>
   {{addr}}<br/>
   {{addr.contactNum}}<br/>
   {{test}}
</div>

자바스크립트

var vm = new Vue({
    el: '#app',
    data: {
      addr: {},
      test: ""
    }
});

Jsfiddle

기ue Vue 、 terterterterter terterterter terter terterter terterter terterter terter 。★★contactNumVue가 해당 속성을 알지 못해 제대로 업데이트할 수 없습니다.는 쉽게 수 .contactNumyour addr★★★★★★ 。

var vm = new Vue({
  el: '#app',
  data: {
    addr: {
      contactNum: "" // <-- this one
    },
    test: ""
  }
});

위의 것을 Vue에서는 반응성이라고 합니다.Vue는 반응성 시스템에 동적으로 속성을 추가하는 것을 지원하지 않기 때문에 해결 방법이 필요할 수 있습니다.API를 통해 가능한 솔루션이 제공됩니다.동적으로 추가된 속성인 경우 사용할 수 있습니다.Vue.set(vm.someObject, 'b', 2).

그렇게 하면 마크업이 갱신될 필요가 있습니다.「 」를 하는 대신에, 「 」를 사용합니다.v-model@input이 경우 마크업은 다음과 같습니다.

<input type="text" id="contactNum" @input="update(addr, 'contactNum', $event)" name="contactNum">

따라서 기본적으로 함수는 입력 요소 값이 변경될 때마다 트리거됩니다.분명히 그렇게 하려면 JS 부분에 대한 일부 조정이 필요합니다.

var vm = new Vue({
  el: '#app',
  data: {
    addr: {},
    test: ""
  },
  methods: {
    update: function(obj, prop, event) {
      Vue.set(obj, prop, event.target.value);
    }
  }
});

가 Vue를 트리거하므로Vue.set()Vue는 동적으로 추가된 속성을 반응형 속성으로 인식하지 않기 때문에 반응형 요소로만 부릅니다.물론 이는 하나의 해결책일 뿐이며 다른 많은 회피책이 있을 수 있습니다.여기에서는 완전히 동작하는 예를 볼 수 있습니다.

제 코멘트에 따르면, 몇 가지 고려 사항이 있습니다.

• 코드가 작동하지 않는 이유는 JS가 본질적으로 객체 속성 변경을 감시할 수 없기 때문입니다.이 말은 비록addr ""에된 "addr선언될 때 수행되지 않은 작업은 수행되지 않는 것으로 간주되지 않습니다.상세한 것에 대하여는, 다음의 VueJS 문서를 참조해 주세요.https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
• 임의의 수의 입력 필드가 있는 경우, 커스텀 입력 컴포넌트를 구성하는 것이 좋습니다.또한 단순히v-for입력 필드 수를 기준으로 입력 필드를 반복적으로 주입합니다.

---

포인트로 필드인지 addr을 사용법 ★★★★★★★★★★★★★★를 작성합니다.updateFormDatamethod: 컴포넌트에 의해 호출됩니다.

data: {
  addrFields: ['contactNum', ...],
  addr: {},
  test: ""
},
methods: {
  updateFormData: function(id, value) {
    this.$set(this.addr, id, value);
  }
}

the the에 저장할 수 .addr " "에 의해 됩니다.updateFormData를 사용하여 수신한 payload를 기반으로 합니다.이제 입력 요소에 맞는 커스텀 Vue 컴포넌트를 생성할 수 있습니다.

컴포넌트를 합니다.addrFields 을 물려줍니다.addrField:id="addrField" 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임, 커스텀 네임.updated컴포넌트 내에서 방출되는 이벤트.

<my-input
     v-for="(addrField, i) in addrFields"
     :key="i"
     :id="addrField"
     v-on:inputUpdated="updateFormData"></my-input>

템플릿의 모양은 다음과 같습니다. '이렇게 하다'를 요.id의 id,name , , , , 입니다.placeholder속성(데모에서 쉽게 식별할 수 있도록 후자). 묶습니다.@change ★★★★★★★★★★★★★★★★★」@input으로 「」, 「」를 .updated★★★★

<script type="text/template" id="my-input">
    <input
    type="text"
    :id="id"
    :name="id"
    :placeholder="id"
    @input="updated"
    @change="updated">
</script>

에서는, 한다고 하는 합니다.id버 an an an an an an an an an an an an an an an an an an an an an an an an an an an an.inputUpdated를 사용하여 이벤트를 수행합니다.갱신된 내용을 부모에게 알릴 수 있도록 ID와 값을 payload로 첨부합니다.

var myInput = Vue.component('my-input', {
    template: '#my-input',
  props: {
    id: {
        type: String
    }
  },
  methods: {
    updated: function() {
        this.$emit('inputUpdated', this.id, this.$el.value);
    }
  }
});

---

위의 코드를 사용하여 작업 예를 제시하겠습니다. 입력 . arbirary arbirary 。contactNum,a,b , , , , 입니다.c:

var myInput = Vue.component('my-input', {
	template: '#my-input',
  props: {
  	id: {
    	type: String
    }
  },
  methods: {
  	updated: function() {
    	this.$emit('updated', this.id, this.$el.value);
    }
  }
});

var vm = new Vue({
    el: '#app',
    data: {
      addrFields: ['contactNum', 'a', 'b', 'c'],
      addr: {},
      test: ""
    },
    methods: {
    	updateFormData: function(id, value) {
      	this.$set(this.addr, id, value);
      }
    }
});

<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<div id="app">
   
   <my-input
     v-for="(addrField, i) in addrFields"
     :key="i"
     :id="addrField"
     v-on:updated="updateFormData"></my-input>
   
   <input type="text" id="test" v-model="test" name="test" placeholder="test">
   <br/>
   <strong>addr:</strong> {{addr}}<br/>
   <strong>addr.contactNum:</strong> {{addr.contactNum}}<br />
   <strong>test:</strong> {{test}}
</div>

<script type="text/template" id="my-input">
	<input
  	type="text"
    :id="id"
    :name="id"
    :placeholder="id"
    @input="updated"
    @change="updated">
</script>

Vue 편집 datagetter와 setter 메서드가 설정되어 있지 않기 때문에 이 기능을 사용합니다.또한 Vue 문서의 선언적 반응 렌더링도 확인하십시오.

data: {
    addr: {
      contactNum: "" // <-- this one
    },
    test: ""
  }

언급URL : https://stackoverflow.com/questions/46925527/vue-js-bind-object-properties