CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-4
ace
ace

Reputation: 12034

How to handle open event in Dialog component of element-ui VueJS?

I have working code using Boostrap 4 in my VueJS project. I show a list of users in a table and each row has link 'Delete'. Each user has email in the row. When Delete is clicked, the BS 4 Modal is showing email of the user in the body of the Modal. Modal has buttons, Cancel and Yes. Cancel closes the Modal and Yes will make API call to backend to delete the user.

This is the code in table row to invoke Modal:

<a   href="#" class="" data-toggle="modal" :data-email="user.email"  data-target="#exampleModal">Delete</a>

This is jQuery to handle Modal that is run when component is mounted:

mounted() {

    let $this = this
    $('#exampleModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
 var email = button.data('email')

      var modal = $(this)

      modal.find('.modal-body').html('<div>Are you sure you want to delete user:</div><div> ' + email + ' ?</div>')

      modal.find('.modal-footer #delete').on('click', function(e) {$this.deleteUser(email)})
    })

How can I achieve the same thing using Dialog component in element-ui?

Dialog component is documented in this link: Dialog

The dialog component defines events like open but no documentation how to use them. So I am clueless.

element-ui Dialog code is:

<el-dialog id="eModal"
  title="Delete User"
  :visible.sync="dialogVisible" 

  >
  <span id="modal-body">Dynamic body content</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Yes</el-button>
  </span>
</el-dialog>

Upvotes: 2

Views: 10357

Answers (1)

hgiasac
hgiasac

Reputation: 2233

You can assign selecting item when clicked the button in delete column.

Row template:

<el-table-column>
  <template slot-scope="scope">
    <el-button @click="openDeleteDialog(scope.row)" type="text" 
       size="small">Delete</el-button>
  </template>
</el-table-column>

Dialog Template:

    <el-dialog id="eModal"
      title="Delete User"
      :visible.sync="dialogVisible" 
    >
      <span id="modal-body">{{ selectedRow.name }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteCancel">Cancel</el-button>
        <el-button type="primary" @click="deleteOk">Yes</el-button>
      </span>
    </el-dialog>

// component
openDeleteDialog(row) {
  this.selectedRow = row;
  this.dialogVisible = true;
}

deleteCancel() {
  this.dialogVisible = false;
  this.selectedRow = null;
}

deleteOk() {
  // delete action here
  this.dialogVisible = false;
  this.selectedRow = null;
}

This is basic knowledge of Vue.js. In Element-UI example, the author use inline code in event. Because they pretend that you know it already. You can read more at Vue.js documentation

Upvotes: 2

Related Questions