Array in Vue Plugin is not reactive

Question

I created a simple plugin available in all components which handles communicates in my application. There is also a special component "Communicates.vue" which listens on array declared in plugin and displays toasts. I have a problem with reactivity, my array is always empty. I am pretty sure I did something similar previously and it worked. Did I miss something?

Communicates.vue

    <div class="communicates">
        {{$communicates.messages}} <!-- always empty :( -->
        <transition-group mode="fade" name="toasts">
            <Toast
                v-for="communicate in $communicates.messages"
                :key="communicate"
                :communicate="communicate"
                @close="$communicates.remove(communicate)"
            />
        </transition-group>
    </div>
</template>
<script>
import Toast from '@/components/Toast';
import { mapGetters, mapActions } from 'vuex';

export default {
    components: {
        Toast
    }
}
</script>

Plugin:

const Communicates = {
    install(Vue) {
        Vue.prototype.$communicates = {
            messages: [],
            success(message) {
                this.messages.push({ type: 'success', message })
                debugger; // OK, app stops here, so it should be added
            },
            error(message) {
                this.messages.push({ type: 'error', message })
            },
            remove(communicate) {
                this.messages.splice(this.messages.indexOf(communicate), 1)
            }
        }
    }
}

export default Communicates // of course I did Vue.use in main.js

Decade Moon · Accepted Answer · 2019-08-08 09:42:47Z

2

Your $communicates object likely isn't reactive. Try this:

Vue.prototype.$communicates = Vue.observable({
  messages: [],
  // etc
})

answered Aug 8, 2019 at 9:42

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

Comments

ittus · Accepted Answer · 2019-08-08 09:49:55Z

0

Can you try creating new references?

Vue.prototype.$communicates = {
  messages: [],
  success(message) {
    this.messages = this.messages.concat([{ type: 'success', message }])
  },
  error(message) {
    this.messages = this.messages.concat([{ type: 'error', message }])
  },
  remove(communicate) {
    this.messages = this.messages.filter(message => message !== communicate)
  }
}

answered Aug 8, 2019 at 9:49

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Collectives™ on Stack Overflow

Array in Vue Plugin is not reactive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related