VueJS dom doesn't refresh when array changed

Question

I have a custom directive called "sortable" but I ran into a problem with the DOM. The problem is when I dragged and dropped an item the array is changed but the DOM isn't.

This is my custom directive:

 Vue.directive('sortable', {
    bind: function(el, binding, vnode) {
        // Initialize sortable
        this.sortable = Sortable.create(el, {});
        console.debug("Sortable initialized");

        this.sortable.option("onUpdate", function(event) {
            binding.value.move(event.oldIndex, event.newIndex);
            var updated = binding.value;
            Vue.set(tasks, updated);
        });
    }
});

And this is how I create my Vue instance:

app = new Vue({
    el: "#app",
    data: {
        subtotal: 0,
        tasks: [
            {name: '', quantity: '', rate: 80, costs: ''}
        ]
    },
    methods: {
        newTask: function() {
            this.tasks.push({name: '', quantity: '', rate: 80, costs: ''})
        },
        deleteTask: function(index) {
            this.tasks.splice(index, 1);
            this.calculateTotal();
        },
        calculateCosts: function(event, value, index) {
            this.tasks[index].costs = event.target.value * value;
            this.calculateTotal();
        },
        calculateTotal: function() {
            this.subtotal = 0;
            _.forEach(this.tasks, $.proxy(function(task) {
                this.subtotal += task.costs;
            }, this));
        }
    }
});

In my template I use: v-for="(task, index) in tasks". Did I something wrong?

when You drag and drop an item, which method is getting called? — Saurabh
– Saurabh, Commented Dec 22, 2016 at 3:42

tony19 · Accepted Answer · 2022-07-15 20:03:47Z

17

As per the documentation, the following methods will trigger view updates. The wrapped methods are:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

However I see you are also doing this assignment in calculateCosts method, which will not trigger the mutation, due to caveats in vue:

this.tasks[index].costs = event.target.value * value;

This can be replaced with the following to trigger the mutation and update the view with the help of Object.assign and Vue.set:

var newVal = Object.assign({}, this.tasks[index], {costs: event.target.value * value})
Vue.set(this.tasks, index, newVal)

edited Jul 15, 2022 at 20:03

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 22, 2016 at 3:47

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

justkidding96 Over a year ago

Thanks for your reaction. I placed this exact same question on the Laravel forum and it is fixed now. The only problem was that I forget the :key=tasks inside of the DOM. But thanks anyways.

Daniel R. Over a year ago

I had a similar issue, and it was bugging me for a while. But I got it fixed because of your comment. So thank you! For future readers, it's actually :key=task instead of :key=tasks.

Luca C. · Accepted Answer · 2021-04-15 15:40:36Z

1

To make vue recept it, use a proper unique key from the array value, not the array index:

<!-- use value.id in :key, not index -->
<div v-for="(value, index) in values" :key="value.id"> .... </div>

edited Apr 15, 2021 at 15:40

answered Apr 15, 2021 at 15:13

Luca C.

12.7k2 gold badges89 silver badges83 bronze badges

Collectives™ on Stack Overflow

VueJS dom doesn't refresh when array changed

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related