CODEWITHSUNDEEP
javascriptvue.js
Mahmud Adam
Mahmud Adam

Reputation: 3579

Implementing Store Pattern in Vue.js

I am trying to implement the store pattern in Vue.js and I am stuck. I have two child components that get shared state passed to them via props. Each child component does something different with the props passed in. comp-a has an input and two buttons where the user can add words to a list or empty out the list altogether, while comp-b is responsible for mapping over and displaying the array of words. I am able to map over the array of words like so:

Vue.component('comp-b', {
   props: ['astore'],
   template: '#comp-b',
   data: function(){
     return {
       words: store.state.words
     }
   },
   computed: {
     theWords: function(){
       return this.words.map(function(word){
         return word
      })
   }
  }
})

I am having some difficulty figuring out how to empty the word list such that by clicking the Empty words button it updates what is being displayed in comp-b (which should be nothing since words have now been cleared from the word list)

Here is a demo: http://codepen.io/p-adams/pen/oLpzPA

Upvotes: 0

Views: 1370

Answers (1)

Altrim
Altrim

Reputation: 6756

To clear out the array you can use

clear: function(){ return this.state.words.splice(0); }

Based on this https://vuejs.org/guide/list.html#Mutation-Methods VueJS triggers view update when using splice.

Upvotes: 1

Related Questions