Vue in vFF, loop, uses a timer to process a parameter. It can receive data for the first time, and when the timer runs, it is empty.

list data formats first

 [{username: "1", content: "2", dataTime: 1534128070979},{username: "11", content: "22", dataTime: 1534128070979}]

get the data from vuex and render it in a loop. DataTime is a timestamp, and the method to handle it is _ updateTimeString. Then deal with this method with a timer. I found that I could only receive the item data for the first time, and the rest was empty. In the beginning, the problem of sequence was not solved by various attempts. Now I suspect that the direction is that it may be rendered once in the double parenthesis template, which will cause it to stop piercing down. Also consider returning a variable directly in {{}}, but because it is troublesome to process it in the loop, ask for advice

<template>
  <div class="comment-list" v-if="comments().length>0">
    <div class="comment" v-for="(item,index) in comments()" :key="index">
        <div class="comment-user">
          <span class="comment-username">
          {{item.username}}:
          </span>
        </div>
        {{item.content}}
        <span class="comment-createdtime">
         {{_updateTimeString(item.dataTime)}}
        </span>
        <span class="comment-delete" @click="handleDeleteComment(index)">
          
        </span>
      </div>
  </div>
</template>

<script>

import { mapState, mapMutations, mapGetters } from "vuex";

export default {
  name: "comment-list",
  data () {
    return {
      timer : Object,
      timeString:"123"
    }
  },
  created(){
    // this.timer = setInterval(this._updateTimeString,1000)
  },
  methods:{
    ...mapState({
      comments:state=>state.comments
    }),
    handleDeleteComment(index){
      console.log(this.comments())
      let newComment = this.comments().splice(index,1);
      localStorage.setItem("comments",JSON.stringify(this.comments()))
    },
    _updateTimeString:(item)=>{
      let duration = (+new Date() - item) / 1000;
      let timeString = duration > 60?`${Math.round(duration/60)}`:`${Math.round(duration)}`;
      return timeString;
   }    
  },
  computed:{
   //  _updateTimeString:(item)=>{
   //  let thisItem = item;
   //  let duration = (+new Date() - item) / 1000;
   //  let timeString = duration > 60?`${Math.round(duration/60)}`:`${Math.round(duration)}`;
   //  console.log(thisItem)
   //  return timeString;
   // }
  
  },
  mounted(){
    // this.timer = setInterval(this._updateTimeString,1000)
  }
}
</script>

{ data() { return { _comments: [] } }, methods:{ ...mapState({ comments:state=>state.comments }), _updateTimeString() { this._comments = []; this.comments.forEach(item => { let duration = (+new Date() - item.dataTime) / 1000; let timeStr = duration > 60?`${Math.round(duration/60)} `:`${Math.round(duration)}`; this._comments.push({ ...item, timeStr }); }) } }, mounted(){ this.timer = setInterval(this._updateTimeString,1000) } }