0

I have a showUpdate boolean in my Profile parent component, which I'm passing to my update-profile child component, whenever I toggle it back from the update-profile the Profile component doesn't show the button again.

This is from my Profile Parent Component

<button
   v-if="!showUpdate"
   v-on:click="showUpdate = !showUpdate"
   class="btn btn-warning m-3"
   >
   <span class="cil-contrast btn-icon mr-2"></span> Primary
</button>
    data() {
        return {
            showUpdate: false,
        };
    },

This is from my Update-Profile Component

<button
    v-on:click="showUpdate = !showUpdate"
    class="btn btn-warning m-3"
    >
      <span class="cil-contrast btn-icon mr-2"></span> Cancel
    </button>
props: ["company", "showUpdate"],

Whenever I click the button on my Update-Profile the button on my Profile doesen't render again and not showing.

kgcusi
  • 215
  • 7
  • 18
  • At the moment your Update-Profile component is mutating the showUpdate prop. This is an anti-pattern, and might be the cause of your problems. Check out https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow for more info on this – Alex T Jul 05 '21 at 12:40
  • So is there no way to update both props? – kgcusi Jul 05 '21 at 13:11
  • you need to emit from update-profile component inorder to handle/view changes in parent component – Amaarockz Jul 05 '21 at 13:19
  • Can I have some reference on how to do this? I'm new to Vue.js and would like to learn more. – kgcusi Jul 05 '21 at 13:20
  • @kgcusi have a look at https://stackoverflow.com/a/40915857/7970660. Essentially, you want to emit an event, and then the component that contains the update-profile component will, when it receives this event, change the data – Alex T Jul 05 '21 at 17:26

0 Answers0