[Vuejs]-Vue.js: Changed computed properties don't get rendered

0👍

It looks like you have the data property time in stead of now in the created function

Try:

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

0👍

Alright, I solved it. I created a Transaction component,

<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>

And I changed the Vue instance,

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

And finally, HTML became this,

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

Leave a comment