CODEWITHSUNDEEP
typescriptvue.jsmodal-dialogantd
farahm
farahm

Reputation: 1326

Vue Ant Design Modal appears twice

Following is my vue:

<template>
  <div class="orderstoapprove">

    <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" bordered rowKey="id">
      <span slot="operation" slot-scope="text, record">
        <a @click="showModal(record)">Details</a>
        <a-modal title="Bestell-Details" width="1000px" v-model="visible" @ok="handleOk">
          <HelloWorld v-bind:order=record></HelloWorld>
        </a-modal>
      </span>
    </a-table>

  </div>
</template>

Which looks like:

enter image description here

So the last column is the "Details" column, which should open a pop up dialog (modal)

showModal is:

  showModal(key) {
    console.log("showModal " + key);
    this.visible = true;
  },

columns are:

const columns = [
    ...
    {
      title: 'Details',
      dataIndex: 'operation',
      scopedSlots: {customRender: 'operation'},
    },
  ];

HelloWorld vue is:

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop()
  private order!: any;
}
</script>

But when I click on "Details" in any row, I see a "double" modal and always only the data from the first table row is shown:

enter image description here

Anybody knows where the error lies?

Upvotes: 0

Views: 1752

Answers (2)

farahm
farahm

Reputation: 1326

I solved it, by putting the <a-model> outside of the <span> attribute:

<a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" bordered rowKey="id">
  <span slot="operation" slot-scope="text, record">
    <a @click="showModal(record)">Details</a>

  </span>
</a-table>

<a-modal title="Bestell-Details" width="1000px"  v-model="visible" @ok="handleOk">
  <HelloWorld v-bind:order=selectedOrder></HelloWorld>
</a-modal>


showModal(key) {
        this.visible = true;
        this.selectedOrder = key;
      },

Upvotes: 0

Himanshu
Himanshu

Reputation: 274

From what I can infer, this is happening because the dialogs don't have a unique value as v-model. So, whenever visible is set to true all the dialogs are appearing simultaneously. Please check by assigning unique value in v-model for each dialog.

Upvotes: 1

Related Questions