Why does my Vue component require :key?

Question

I have a small Vue.js component which displays a favorite star icon. Clicking on the icon favorites/unfavorites the element. So far I have only implemented the UI part, whic

Answer 1

Ok I think the problem here is that you're changing your root data object. To preserve reactivity, you shouldn't change the root data object after you've instantiated Vue.

Here is your code in a simple Vue. I didn't need :key to make it work. I would keep :key for inside loops.

markup

  
    Fav
    Not fav
  

code

vm = new Vue({
  el : "#vueRoot",
  data() {
    return { store :{
      favorite: true
    }}
  },
  mounted() {
  },
  methods: {
    toggleFavorite() {
      this.store.favorite = !this.store.favorite
    }
  }
}
);

This is a working example with minimal changes. From what you've showed us, you should just have element, then do what you want with a dynamic class list, like...