vue在v-for,循環(huán)中，用定時器處理一個參數(shù)，第一次能夠接收到數(shù)據(jù)，當(dāng)定時器跑起來就為空了

先列出數(shù)據(jù)格式

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

從vuex中獲取到的數(shù)據(jù)，然后循環(huán)渲染。dataTime是一個時間戳，然后處理的方法是_updateTimeString。再將這個方法用定時器處理。我發(fā)現(xiàn)只能接收到第一次的數(shù)據(jù)item的數(shù)據(jù)，其他的為空了。一開始以為是的前后順序的問題，各種嘗試沒能結(jié)解決?，F(xiàn)在我懷疑的方向是雙括號模板中可能就渲染一次了，就會造成不再往下穿參了。也考慮在{{}}中直接返回一個變量，但是因為循環(huán)中在處理就比較麻煩了，求指點迷津

<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>
        <p>{{item.content}}</p>
        <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>

回答

編輯回答

真難過

你的思路很清奇啊小伙子。。你在mounted里調(diào)用肯定沒用啊，光循環(huán)這個函數(shù)，跟 UI 上綁定的數(shù)據(jù)一點關(guān)系都沒有好吧大兄弟，幫你捋一下，你是想過一秒就刷一下 comment 里的時間轉(zhuǎn)成字符串，里邊東西變了，ui 自然會變的，這樣寫:

{
    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)
   }
}

然后界面渲染用 _comments，時間幫你用另外一個 key 存儲了,timeStr

2017年11月22日 04:28

編輯回答