Question

我与Vue Vuex有反应性问题。我正在使用开源倒数计时器。在下面的代码中， item.dueDate 在$ store中的活动项目发生更改时（页面上显示新日期）会正确响应，但是，传递给Countdown的数据不会更新。它具有旧的价值。不过，它确实是第一次工作。所以，它没有更新。为什么不？谢谢！！

<template>
    <v-layout>
        <v-flex>
            <v-card v-if="item">
                <v-card-text>
                    <h3>Countdown {{item.name}} - {{item.dueDate}}</h3>
                </v-card-text>
                <Countdown v-if="item.dueDate" :deadline="item.dueDate"></Countdown>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script> 
import Countdown from 'vuejs-countdown'

export default {    
  components: { Countdown },
  computed: {
            activeItem(){
            return this.$store.getters.activeItem
        },
        item(){
            return this.$store.getters.loadedItem(this.activeItem)
        }
    }
}
</script>

Answer 1

问题在于我导入的倒计时模块。当我打开它时，我看到了为什么组件没有按预期更新。

倒计时模块仅在已安装

上设置一次数据

    mounted() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

因此，如果组件在数据发生变化时停留在页面上，那么它永远不会再次更新。我通过修改模块来添加一个更新的方法来解决这个问题，这个方法很有用......

    updated() {
        this.date = Math.trunc(moment(this.deadline) / 1000)
        }

干杯，S

存储更改时Vue Vuex组件未更新

1 个答案: