Vue.js app doesn't update view as expected

Question

I've bound the input in this tiny app to a computed property called currentCat which has both a getter and setter method. Using console.log it can been seen that the cats array has been property updated, but none of the changes are reflected in the rendered html.

Here is the HTML for the app:

<div id="app">
  <ul>
    <li v-for="cat in cats">{{ cat }}</li>
  </ul>
  <div>{{ currentCat }}</div>
  <input type="text" v-model="currentCat">
</div>

And here is the JavaScript:

let app = new Vue({
  el: "#app",
  data: {
    currentCatIndex: 0,
    cats: ["Bob", "Tom", "Cat", "Dog"]
  },
  computed: {
    currentCat: {
      get() {
        return this.cats[this.currentCatIndex];
      },
      set(value) {
        console.log(value, this.cats[this.currentCatIndex]);
        this.cats[this.currentCatIndex] = value;
        console.log(this.cats[this.currentCatIndex]);
      }
    }
  }
});

Shouldn't the list and the div in the html update automatically when the computed property's setter runs?

tony19 · Accepted Answer · 2022-07-15 23:52:45Z

2

Vue can't detect changes to an array when you do:

this.cats[this.currentCatIndex] = value;

Use one of the followings instead:

this.$set(this.cats, this.currentCatIndex, value)

// or
this.cats.splice(this.currentCatIndex, 1, value)

See list rendering caveats.

edited Jul 15, 2022 at 23:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 3, 2018 at 21:31

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

Collectives™ on Stack Overflow

Vue.js app doesn't update view as expected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related