[Vuejs]-Vue: Detect when new component is mounted

by

1👍

✅

Watching subcomponents internal properties is not really the Vue way, properties like $options are used by plugins and the likes but you should not really use it in your day-to-day code.

Ideally you should have a v-if or an event that links the two but it appears that it is not possible.

Therefore you should share state with Vuex and have conditional behavior based on this shared state. Something like:

// store.js
export default new Vuex.Store({
  state: {
    userCanUndo: false,
  },
  mutations: {
    setUserCanUndo(state, value) {
      state.userCanUndo = value;
    }
  },
}

// Undo.vue
<template>
  <div v-if="userCanUndo">
    <!-- ... -->
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['userCanUndo']),
  },
}
</script>

// DeleteButton.vue
<template>
  <button :disabled="userCanUndo" @click="delete">
    Delete
  </button>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['userCanUndo']),
  },
  methods: {
    ...mapMutations(['setUserCanUndo']),
    delete() {
      // your delete code here
      this.setUserCanUndo(true);
      setTimeout(() => { this.setUserCanUndo(false); }, 2000);
  }
}
👤Nino Filiu

Leave a comment