>source

저는 Vue를 처음 접했고 한 프로젝트에서 숫자에 따라 객체 배열을 만들려고합니다. 예를 들어 총 길이 값이 3이면 다음을 만들 수있는 방법이 있습니까? fetchList1 , fetchList2fetchList3 ? 총 길이 값이 2이면 데이터 반환 개체를 다음과 같이 만들어야합니다. fetchList1fetchList2 .

나는 데이터베이스에서 총 길이 값을 얻고 있으므로 때로는 50 이상 5 미만이 될 수 있습니다.

전망

<div id="app">
  <button @click="grabTeams()">
   CLICK ME
  </button>
</div>

방법

new Vue({
  el: "#app",
  data: {
    totalLength: '3',
    fetchList1: '', 
/** if the total length is 3 then it should automatically create fetchList1, fetchList2 and fetchList3 **/
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },
    
    grabTeams(){
        console.log('Total value length ' +this.totalLength);
        for(let b=0; b < this.totalLength; b++){
          console.log('value of '+b);
          var replyDataObj1 = parseInt(b);
            replyDataObj1={
              "id" : b
            }
            this['fetchList'+b] = replyDataObj1;
        }
      }, 
  }
})

아래는 jsfiddle에서 시도한 링크입니다.

https://jsfiddle.net/ujjumaki/8xq9wn1m/14/

  • 답변 # 1

    루트 데이터 속성을 동적으로 추가하려고하면 Vue에서 경고를 표시합니다. 문서에서 :

    Vue does not allow dynamically adding new root-level reactive properties to an already created instance.

    대신 fetchList 정렬:

    data() {
       return {
          fetchList: []
       }
    }
    
    

    추가 :

    for(let b = 0; b < this.totalLength; b++){
       this.$set(this.fetchList, b, {
          id: b
       })
    };
    
    

    당신은 사용해야합니다 this.$set (또는 Vue.set ) 배열에 동적 인덱스를 추가하고 있기 때문입니다.

    다음은 데모입니다.

    new Vue({
      el: "#app",
      data: {
        totalLength: '10',
        fetchList: [],
      },
      methods: {
        toggle: function(todo){
          todo.done = !todo.done
        },
        grabTeams(){
          for(let b = 0; b < this.totalLength; b++){
             this.$set(this.fetchList, b, {
                id: b
             })
          }
        }
      }
    })
    
    

    <div id="app">
      <button @click="grabTeams()">
       CLICK ME
      </button>
      {{ fetchList }}
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    
    

  • 이전 android - viewbinding - ''에 액세스 할 수 없음 : 'activitymainbinding'에서 비공개입니다
  • 다음 OpenCV Join 경계 상자 파이썬