vue.js의 Rerender 목록 2

나는 어떤 이벤트에서 얼마나 많은 시간이 경과했는지 표시하려면 moment.js을 사용합니다. 목록은 (새 항목이 추가, 예를 들어, 매 2 분) 자주 업데이트되지 않습니다vue.js의 Rerender 목록 2

나는 (vue.js를 사용하여 렌더링) 목록

event 3, 5 seconds ago 
event 2, 1 minute ago 
event 1, 5 minutes ago

문제가 있습니다.

n (seconds|minutes) ago 문자열을 업데이트하고 싶습니다.

setInterval을 사용하여 간단한 루프를 수행해야합니까?

for(let i = 0; i < this.list.length; i++) { 
    let item = this.list[i]; 
    item.created_at_diff = moment(item.created_at).fromNow(); 
    this.$set(this.list, i, item); 
}

또는 더 나은 방법이 있습니까?

이

let Timer = Vue.extend({ 
    template: '#timer', 
    props: ['timestamp'], 
    data() { 
    return { 
     formatted: '' 
    } 
    }, 
    methods: { 
    format() { 
     let self = this 
     this.formatted = moment().to(moment(this.timestamp,'X')) 

     // Uncomment this line to see that reactivity works 
     // this.formatted = moment().format('X') 

     setTimeout(() => { 
     self.format() 
     },500) 
    } 
    }, 
    created() { 
    this.format() 
    } 
})

타이머가 하나 개의 속성을 취합니다

첫째, 타이머를 만들 것입니다 구성 요소를 만들 것입니다 : 여기

출처

2017-02-10 Jackson J

는 문자열 목록을 사용하여 계산 된 속성을해야하지? 이 경우 목록을 변경하면 문자열도 변경되어야합니다. – Potray

@Potray, 전체 목록이 아닌'item' 목록에 대해 계산 된 속성 작성 방법은 무엇입니까? –

다음은 계산 된 속성을 작성하는 방법입니다. https://vuejs.org/v2/guide/computed.html#ad – Potray

내가 만약 내가 잘못 말해, 그런 일을 할 것입니다 방법입니다 , UNIX 타임 스탬프 (초). 구성 요소에는 format()이라는 하나의 메서드가 포함되어 있으며 구성 요소의 데이터 formatted 만 업데이트합니다. 이 메서드는 재귀 적이며 자신을 500ms마다 호출합니다 (setTimeout()). 원하는 경우이 숫자를 더 크게 만들 수 있습니다. 여기

당신이 그것을 테스트하려는 경우 내가 만든 jsFiddle :

https://jsfiddle.net/54qhk08h/

출처

2017-02-10 12:53:09 Hammerbot

vue.js의 Rerender 목록 2

답변

관련 문제