여러 개의 Vue.set() 객체/DOM을 업데이트하지 않습니다.

Question

저는 VueJs를 배우고 있으며, 제 문제에 가장 적합한 솔루션을 찾으려고합니다.
this.$set() 번을 여러 번 호출하면 마지막 호출 만 등록된다는 문제가 있습니다.

(이전 angular1 일과 같이) setTimeout을 사용해 보았지만 여전히 작동하지 않습니다.
그렇다면 DOM을 다시 렌더링해야하는 Vue.$nextTick()으로 시도했지만 데이터가 개체에 충분히 빠르게 추가되지 않은 것 같습니다.

데모 확인 here.
모든 버튼을 여러 번 누르면 대부분의 시간 동안 첫 번째 로그를 건너 뛰게됩니다.

Answer 1

Date.now()의 사용이 올바르지 않습니다. 너무 빨리 발생하므로 타임 스탬프가 2 this.$set 작업 사이에서 변경되지 않는 경우가 있으므로 logs 개체의 값을 다시 정의하십시오.

{ 
    1509287060410:"I was clicked!" 
    1509287060412:"I was clicked again!" 
    1509287061243:"I was clicked again!" 
} 

마지막 1509287061243 재산권이었다 내가 처음 버튼 그래서

1509287060410 // first result of Date.now. 
1509287060412 // Second Result of Date.now - this time, it's different from the first attempt, so 2 different entries will be created. 
1509287061243 // another click on the button - timestamp has changed obviosuly. 
1509287061243 // Javascript did the second Set so far, that time timestamp didn't even changed yet. thus, it overrides the value of the second entry 

이 로그 4 개 this.$set 연산의 결과를 클릭하면

생성이 logs 객체 Date.now()의 로그를 참조 overrriden.

(함수의 두 번째 인수) 키를 호출 할 때마다이라는 키를 사용해야합니다. 또한 로그가 Array에 입력 변경할 수 있습니다

data() { 
    return { 
     title: 'Multiple Vue.set() not updating object/DOM', 
     logs: {}, 
     index: 0 
    } 
    }, 
    methods: { 
    log: function(data) { 
     console.log(Date.now()) 
     this.index += 1 
     this.$set(this.logs, this.index, data) 
    }, 

Answer 2

:

내 새로운 코드의 제안을 참조하십시오. 이렇게하면 키 재 지정으로 인해 로그를 놓치지 않습니다. 예를 들어,

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     logs: [] 
 
    } 
 
    }, 
 
    methods: { 
 
    log(data) { 
 
     this.logs.push({ 
 
     time: Date.now(), 
 
     text: data 
 
     }) 
 
    }, 
 
    logClick() { 
 
     this.log('I was clicked!') 
 
     this.log('I was clicked again!') 
 
    } 
 
    } 
 
})

<div id="app"> 
 
    <button @click="logClick">Log click :)</button> 
 
    <ul v-if="logs"> 
 
    <li v-for="(log, i) in logs" :key="i" v-text="log.text"></li> 
 
    </ul> 
 
</div> 
 
<script src="https://unpkg.com/vue"></script>