VueJS 동적 속성 이름이 값을 업데이트하지 않음

VueJS 동적 속성 이름이 값을 업데이트하지 않음

연관된 어레이와 값 내의 속성에 액세스하는 방법을 조합하여 구현하려고 합니다. 키는 캠페인 개체의 값을 기반으로 합니다.

<li v-for="campaign in campaigns">
    <input type="text" v-model="configuration[campaign._id].value"> {{ configuration[campaign._id].value }}
</li>

https://jsfiddle.net/4yc3bujt/1/

내가 뭘 놓치고 있는 거야, 정말 짜증나.VueJs 1에서 이 작업을 수행하려고 하면 거의 같은 현상이 발생하지만 두 번 모두 오류가 발생하지 않습니다.

이것은, 에서의 반응성의 경고에 의해서 발생하고 있습니다.vue.js. 방금 정의했습니다.configuration: {}초기 데이터에서는요.configuration[key]반응하지 않습니다.반응시키려면 이걸 사용해야 해$set:

개체에 속성을 설정합니다.개체가 반응형인 경우 속성이 반응형 속성으로 생성되고 뷰 업데이트를 트리거하는지 확인합니다.이는 주로 Vue가 속성 추가를 감지할 수 없다는 제한을 피하기 위해 사용됩니다.

다음과 같이 사용합니다.

this.campaigns.forEach((campaign) => {
  var id = campaign._id;
  this.$set(this.configuration, id, {'value': 'default value'})
})

var app = new Vue({
  el: '#app',

  data: {
    campaigns: [],
    configuration: {}
  },

  mounted: function() {
    this.campaigns = [{
      _id: 'abcdefg'
    }, {
      _id: 'kejwkfe'
    }, {
      _id: 'iruwiwe'
    }, {
      _id: 'reiwehb'
    }];

    this.campaigns.forEach((campaign) => {
      var id = campaign._id;
      this.$set(this.configuration, id, {'value': 'default value'})
    })
  }
})

<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="campaign in campaigns">
      <input type="text" v-model="configuration[campaign._id].value" /> 
           {{ configuration[campaign._id].value }}
    </li>
  </ul>
</div>

반응성이 있는 속성은 Vue 생성자가 생성한 Vue 인스턴스에 있어야 합니다.

속성을 반응적으로 유지하고 뷰 업데이트를 트리거합니다. 즉, 다음과 같이 초기화됩니다.Object.defineProperty그리고.MutationObserver밑바닥에

그럼, 을 사용해 주세요.Vue.set새 속성을 추가하고 다음 방법으로 삭제합니다.Vue.delete.

상세 정보 표시 - 반응성 상세

언급URL : https://stackoverflow.com/questions/42077023/vuejs-dynamic-property-name-not-updating-value