Question

模板：

<tbody>
    <tr v-for="item in transactionList"
        v-bind:class="{ 'almost-due': item.time_remaining != null && item.time_remaining < 60 }"
        data-transaction="${ item.id }">
        <td>${ item.id }</td>
        <td>${ item.label }</td>
        <td class="text-center minimal">${ item.status_label }</td>
        <td class="text-center minimal">
            <div v-if="item.time_remaining != null">
                <span>${ item.time_remaining * 1000 | moment 'mm:ss' }</span>
            </div>

            <div v-if="item.time_remaining == null">
                ${ item.created_at_formatted }
            </div>
        </td>
    </tr>
</tbody>

脚本：

var Page = new Vue({
    el: '#app',
    data: {
        transactions: [],
        now: Date.now() / 1000
    },
    computed: {
        transactionList: {
            cache: false,
            get: function () {
                return this.transactions.map(function (transaction) {

                    // Calculate remaining time only if there is a due time
                    if (transaction.assignment_due_at != null) {
                        // remaining time = due time - now
                        transaction.time_remaining = Math.floor(
                            (new Date(transaction.assignment_due_at)).getTime() / 1000
                            - Page.now
                        );
                    } else {
                        transaction.time_remaining = null;
                    }

                    return transaction;
                });
            }
        }
    },
    created: function () {
        setInterval(function () {
            Page.$data.now = Date.now() / 1000;
        }, 1000);
    }
});

问题是Vue没有看到transaction.time_remaining已更改，因此不会更新DOM。

我使用的是Chrome DevTools Vue插件，它确认transaction.time_remaining每秒都会更新，但我在页面上看不到任何更改。

Answer 1

您似乎在time函数

中拥有数据属性now而不是created

尝试：

created: function () {
        setInterval(function () {
            Page.$data.now = Date.now() / 1000;
        }, 1000);
    }

Answer 2

好吧，我解决了。我创建了一个Transaction组件

<script> /* Javascript */
    var Transaction = Vue.extend({
        template: '#transaction-item-template',
        props: {
            model: Object
        },
        computed: {
            time_remaining: function () {
                if (this.model.assignment_due_at == null) {
                    return null;
                }

                return Math.max(0, Math.floor(
                    (new Date(this.model.assignment_due_at)).getTime() / 1000
                    - Page.now
                ))
            }
        }
    });
</script>

<script type="text/x-template" id="transaction-item-template"> /* Template */
    <tr :class="{ 'almost-due': time_remaining != null && time_remaining < 60 }"
        data-transaction="${ model.id }">
        <td>${ model.id }</td>
        <td>${ model.label }</td>
        <td class="text-center minimal">${ model.status_label }</td>
        <td class="text-center minimal">
            <div v-if="time_remaining != null">
                <span>${ time_remaining * 1000 | moment 'mm:ss' }</span>
            </div>

            <div v-if="time_remaining == null">
                ${ model.created_at_formatted }
            </div>
        </td>
    </tr>
</script>

我改变了Vue实例，

var Page = new Vue({
    el: '#app',
    data: {
        transactions: [],
        now: Date.now() / 1000
    },
    methods: {
        addTransaction: function (transaction) {
            this.transactions.unshift(transaction);
        },

        updateTransaction: function (transaction) {
            var index = _.findIndex(this.transactions, {id: transaction.id});

            if (index > -1) {
                this.transactions.$set(index, transaction);
            } else {
                this.transactions.push(transaction);
            }
        }
    },
    components: {
        'transaction': Transaction
    },
    created: function () {
        init();
    }
});

function init() {
    setInterval(function () {
        Page.now = Date.now() / 1000;
    }, 1000);
}

最后，HTML变成了这个，

<tbody>
    <tr is="transaction" v-for="item in transactions" :model="item"></tr>
</tbody>

Vue.js：未更改计算属性

2 个答案: