0

I am using vuetify.js and trying to pass v-model in props to a v-dialog tag,

the v-dialog doesn't work. when I click on the button which set the props to true,

the v-dialog doesn't open

attached here the parent and the child component code:

here is my code :

my parent component:

data: () => ({
    showActionDialog:false,
    )},
<team-actions 
           @movetohistorytab="$emit('historytab')" 
           :team="team" 
           :showActionDialog="showActionDialog"
           :selectedSetups="selectedSetups">
           </team-actions>
                       <v-tooltip top>
            <template v-slot:activator="{ on }">
              <v-chip
                :disabled="selectedSetups.length <= 0"
                v-on="on"
                class="ma-2 white--text float-right"
                label
                outlined
                style="font-family: 'Segoe UI Emoji';"
                color="green"
                @click="showActionDialog=true"
                >Add Actions</v-chip
              >
            
            </template>
            Add actions to the selected platforms
          </v-tooltip>

my child component:

props: {
    team: {
      type: String,
      default: "Sustaining",
    },
    selectedSetups:[],
    showActionDialog:false,
  },
<v-dialog v-model="showActionDialog">
        <v-card
          width="900px"
          style="
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
          "
        >
          <v-row>
            <v-col cols="5">
            <v-card-title primary-title style="color: #0d47a1">
              <v-icon color="blue darken-4">arrow_forward</v-icon>Platform
              Actions
              </v-card-title>
              </v-col>      
          </v-row>
          <v-col>
            <v-card style="height: 500px" :tile="true">
                
            </v-card>
          </v-col>
        </v-card>
      </v-dialog>

any idea what is wrong here?

there something special in v-dialog props?

anyone can help?

thanks!

user
  • 136
  • 2
  • 16
  • I see yuo have `showActionDialog` in both parent and child. You are utilizing it in the child, but updating it in the parent( these are not the same variable!) – Techno Oct 29 '20 at 12:03
  • You can try: In parent, add `rel="actions_dialog"`to child component attributes. And the parent's `@click="showActionDialog=true"` should become something like `@click="$refs['actions_dialog'].showActionDialog=true"`. This effectively sets the child's `showActionDialog` to tue so it should render. – Techno Oct 29 '20 at 12:33
  • thanks, the v-model and the props in the child component should be : actions_dialog ? – user Oct 29 '20 at 12:59
  • No thats not necessary. `actions_dialog` is only for the parent, not the child. But it creates an interface between your parent and the child component, so you can access the child-component's showActionDialog` See https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements – Techno Oct 29 '20 at 13:01
  • not working :(, did as follow: in parent put a variable call : actions_dialog, in child attribute put: rel="actions_dialog", on the click func i put : @click="$refs['actions_dialog'].showActionDialog=true". in the child I have props called ShowActionDialog", this is what you mean? – user Oct 29 '20 at 13:14
  • What error do you get(if any)? – Techno Oct 29 '20 at 13:15
  • TypeError: Cannot set property 'showActionDialog' of undefined at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"03249adf-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/TeamPlatforms.vue? – user Oct 29 '20 at 13:18
  • "TypeError: Cannot set property 'showActionDialog' of undefined" – user Oct 29 '20 at 13:18
  • I added an answer to make the total code more clear. No need to change the child, only the parent :) – Techno Oct 29 '20 at 13:19
  • After realizing you bound both variables with `:showActionDialog="showActionDialog"` in parent, my answer did not address the issue.(please undo the changes and sorry for my mistake) – Techno Oct 29 '20 at 14:47
  • Did you install the browser extension? Because with it you can see if the value changes as you expect it to. I would check both the parent's and the child's `showActionDialog` – Techno Oct 29 '20 at 14:53
  • Thank you any way :) – user Oct 29 '20 at 15:09

0 Answers0