How to take advantage of the onOk method in Vue Ant Design's Modal component

I am currently attempting to utilize Vue Ant's confirmation modal dialog, but I am encountering difficulties in accessing methods and data within the onOk prop. Whenever I try to call my methods or use this.$emit, I receive an error message stating "TypeError: Cannot read property '$emit' of undefined". I am seeking guidance on how to properly access my methods and data inside the onOk prop for this component.

deleteCampaign() {
      this.$confirm({
        title: `Are you sure you want to delete ${this.campaign.name}?`,
        content: 'This will permanently delete the campaign and all associated info.',
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        iconType: 'warning',
        onOk() {
          this.$emit('delete-campaign', this.campaign.pk);
        },
        onCancel() {},
      });
    }

Answer №1

onOk() { ... } needs to be converted into an arrow function in order to correctly bind the context to the Vue instance:

onOk: () => { this.$emit(...) }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Google Finance JSON response not functioning as expected in Chrome and Firefox browsers, yet appears to be working properly in

I am currently working on a JavaScript project that involves fetching STOCK data from the Google Finance API. When I manually paste the link into my browser, I can successfully retrieve the JSON response: // [ { "id": "22144" ,"t" : "AAPL" ,"e" : "NASDAQ ...

Is it possible for a React application to manage errors (status code 4xx) using a try-catch block

Currently delving into React (using hooks) and facing an interesting challenge. I am in the process of building a Notes Application (from FullStackOpen's learn react section). The database I'm working with only allows notes with content length gr ...

Modify the text area according to the "title" feature of a dropdown selection

I want to automatically update a hidden input field based on the title attribute of the selected dropdown option. <form> <select id="selectbox"> <option name="test" value="one" title="title1">one</option> & ...

In what way can a pointlight be directed towards a specific angle?

Is it possible to use a PointLight as a SpotLight when my camera is facing in the negative z direction and the pointlight is directed towards (0, 0, 0)? How can I adjust the pointlight to target (0, 0, -100) instead? ...

Validating an email address without the "@" symbol or if the "@" symbol is the last character

I've been working on validating email addresses using regex, but I'm encountering an issue. The problem is that the validation fails for emails that don't contain the "@" character or have it at the end of the word. For example, if I type "a ...

Iterate through an array of asynchronous JavaScript functions in a synchronized manner

Is it possible to loop through and execute an array of asynchronous Ajax calls in order without using promises? Below is my current approach, although it does not wait for the last post to complete: for (i = 0; i < post.length; i++) { post[i](); }; ...

When I attempt to animate 4 div boxes, only 2 of them are actually animated instead of all

I am currently working on a grid layout with 4 boxes and I want to add a fade effect using jQuery when hovering over them. However, at the moment only 2 of the boxes are animating. How can I make the other 2 boxes also animate? Below are snippets of my jQu ...

Is there a way to apply toggling and styles to only the card that was clicked in Vue.js?

DisplayBooks.vue consists of a single page responsible for showcasing books fetched from a backend API. Each card on the UI features two buttons - ADD TO BAG and ADDED TO BAG. When a user clicks on the ADD TO BAG button of a specific card, it should toggle ...

Unlocking the Secrets of Laravel Blade Integration in a Script File

I am attempting to create a customized store locator application using the guidance provided in this useful tutorial on Google Maps and Laravel 5. While going through various queries related to integrating Google Maps with Laravel, I came across these info ...

Unleash the power of multiple mouse/touch events with OGX.JS!

I am attempting to calculate the distance after a touch or mouse movement over two separate elements using OGX.JS. Utilizing the built-in touch dist function has been successful. this.touch.dist.set({ target: '.box1', cb_move: functio ...

When selecting an input within a div, the Angular onblur function is behaving erratically

How can I prevent the div from closing when I click on an input inside it after setting a tabindex to the div and closing it on blur? Solution for app.component.html: <button (click)="openToggle('toggle1')">Toggle 1</button> ...

What is the best way to invoke React component code from renderer.js?

Hello everyone, I am diving into the world of React/JS and Electron and have a goal to develop a desktop application using these amazing technologies. Currently, my biggest challenge is figuring out how to call react component code from renderer.js. Let m ...

The text field is unable to receive input by clicking a button, only registering values when physically typed into the field

I have three text fields with buttons to increment or decrement the value, and a final text field that displays the calculation of the values in each field. Everything is functioning correctly, however, the issue arises when I try to add values using the ...

Transforming an Input Field into a String with React's onChange Event

I have a small application consisting of three components Parent Component: App Son Component: Courses Grandchild Component: Course The state of the app is stored in the App component. In the Course component, there is an input field with an onChange ev ...

"Bootstrap 4 with the ability to display multiple content sections under a

Currently, I am experimenting with bootstrap tabs and my goal is to have a single tab with multiple content divs. I attempted to achieve this by using two data-target values like data-target=".etab-p1, .etabi-img1". However, the solution only seems to work ...

Validation with Vuelidate of a Vue form field within a BootstrapVue component is triggered by a click event

I am in the process of developing a registration form that checks if a login ID entered by the user is available on the server. This particular form is built using bootstrapvue. <b-form @submit="onSubmit" v-if="show" @reset="onReset" > & ...

JavaScript - Replacing key/value pairs in an object and transferring them to a different object

I am struggling with accessing and modifying the keys, values, and entries in an object (array), then transferring it to a new empty object (newArray). While I can retrieve the keys, values & entries, I'm facing difficulty making changes to them. The ...

Setting up the Firebase emulator: should you use getFirestore() or getFirestore(firebaseApp)?

After delving into the process of connecting your app to the Firebase emulators like Firestore emulator, I came across the primary documentation which outlined the steps for Web version 9: import { getFirestore, connectFirestoreEmulator } from "fireba ...

Assign specific CSS classes to elements based on the v-model value in Vue.js

Looking to create a dynamic table using Vue and trying to add a class to a row when a checkbox is checked. Each checkbox is associated with a specific value in an object of objects. View the code on Codepen. <tbody> <tr v-for="row in filter ...

Updating the appearance of tabs in React Native Navigation dynamically during runtime

I am currently working with the startTabBasedApp API, which includes three tabs in my app. I have a requirement to change the background color of the tabBar for specific screens dynamically. Is it possible to achieve this at runtime? For instance: Scree ...