Friday 12 March 2021

Dynamically create Vue Component on click

I have a list of orders which I am populating via the orders array. Each of these orders have a functionality where the user can edit these orders. I am trying to generate a vuetify dialog box component when the user clicks on the edit button which will have the default data from that order which the user can choose to edit. So far I have tried this,

<tbody class="items">
  <tr v-for="order in orders" :key="order.name">
    <td></td>
    <td></td>
    <td></td>
    <!-- <td></td> -->
    <td></td>
    <td v-if="order.status == true">
      <v-chip small outlined class="ma-2 chip" color="green">delivered</v-chip>
    </td>
    <td v-if="order.status == false">
      <v-chip small outlined class="ma-2 chip" color="red">in progress</v-chip>
    </td>
    <td>
      <!-- <component v-bind:is="component"></component> -->
      <!-- <EditOrder></EditOrder> -->
      <v-dialog v-model="dialog" persistent max-width="290">
        <template #activator="{ on, attrs }">
          <v-btn icon color="primary" dark v-bind="attrs" v-on="on"> Open Dialog </v-btn>
        </template>
        <v-card>
          <v-card-title class="headline"> Use Google's location service? </v-card-title>
          <v-card-text></v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click="dialog = false"> Disagree </v-btn>
            <v-btn color="green darken-1" text @click="dialog = false"> Agree </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </td>
  </tr>
</tbody>

but this generates n instances of the dialog box before the actual components loads. I also tried using async components but couldn't figure out where I was wrong.

This is what I think should happen; When the user clicks on the "edit order" button, a dialog box component with the default order details for that particular order must be automatically generated and destroyed. Please correct me if I am wrong.



from Dynamically create Vue Component on click

No comments:

Post a Comment