【问题标题】:The time in my Vuetify data table is not updating我的 Vuetify 数据表中的时间没有更新
【发布时间】:2020-06-16 20:21:38
【问题描述】:

我在 Vuetify 数据表上设置了一个间隔以显示最近的日期,但该函数被调用但表没有更新以在单元格中显示新时间。 How can I update the table without refreshing the whole page?

这是显示我的问题的 codepen 链接。 https://codepen.io/entropy283/pen/rNxMXGX?editors=1011

【问题讨论】:

    标签: vue.js vuetify.js v-data-table


    【解决方案1】:

    您可以将新日期存储在数据变量中,并在模板中使用此变量。示例:

    // currentDate is the new data variable
    <template v-slot:item.calories="{ item }">
      <v-chip dark>{{ currentDate }}</v-chip>
    </template>
    
    data(){
      return {
       currentDate: null
      }
    },
      mounted: function () {
        // Execute immediately on mounted
        this.currentDate = this.getColor();
    
                        this.$nextTick(function () {
                            window.setInterval(() => {
                                // Set current date
                                this.currentDate = this.getColor();
                            }, 1000);
                        });
                    },
    

    【讨论】:

    • 当我在上面的 codepen 中尝试时,这似乎不起作用。
    • 你看,我又创建了一个codepen -> codepen.io/nyankov/pen/vYLyBKj
    • 这是您预期的行为吗?
    • 啊!你是绝对正确的!我忘了在数据部分添加currentDate: null!谢谢!
    猜你喜欢
    • 1970-01-01
    • 2019-03-07
    • 1970-01-01
    • 1970-01-01
    • 2018-09-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-21
    相关资源
    最近更新 更多