CODEWITHSUNDEEP
javascriptvuejs3
Blaze_droid
Blaze_droid

Reputation: 479

How to use $emit inside .then of an Axios request in Vue 3

I have a method inside a Vue component like this:

submitForm() {
    let formData = new FormData();
    formData.append("file", this.file);
    const config = {
        headers: {
            "Content-Type": "multipart/form-data"
        }
    };

    this.axios
        .post(
            "http://localhost/api.php",
            formData,
            config
        )
        .then(function(data) {
            this.$emit("serverReturnedData", data);
        })
        .catch(function() {
            console.log("FAILURE!!");
        });
}

But the this.$emit("serverReturnedData", data) is not working.

And this is the api.php. It just moves the uploaded file and returns an url pointing to that file.

<?php
  
    header('Access-Control-Allow-Origin: *');  
  
    $file_type = $_FILES["file"]["type"];

    $allowed = array("application/pdf");
    if(!in_array($file_type, $allowed)) {
    $error_message = 'Only pdf files are allowed.';
    } elseif (move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$_FILES['file']['name'])) {
        echo "http://localhost/upload/" . $_FILES["file"]["name"];
        exit;
    }
  
    echo "failed";
  
?>

Upvotes: 0

Views: 1211

Answers (3)

Zeppelin17
Zeppelin17

Reputation: 61

As hoangdv said you should use an arrow function in the clause. Also consider using kebab-case for the naming of events as advised in the documentation.

And finally, how are you listening to this custom event in the parent component? It should be something like:

<parent-component v-on:your-custom-event="someJavascript" />

Upvotes: 0

HabardiTurki
HabardiTurki

Reputation: 50

if for some reason you don't want to use an arrow function, you can write it like this

submitForm() {
    let formData = new FormData();
    let self = this; // <<<<< like this
    formData.append("file", this.file);
    const config = {
        headers: {
            "Content-Type": "multipart/form-data"
        }
    };

    this.axios
        .post(
            "http://localhost/api.php",
            formData,
            config
        )
        .then(function(data) {
            self.$emit("serverReturnedData", data);
        })
        .catch(function() {
            console.log("FAILURE!!");
        });
}

Upvotes: 0

hoangdv
hoangdv

Reputation: 16147

First of all, make sure that your client successfully executes the request.

Then, use arrow function instead of an anonymous function definition to handle then result of the promise. Now this context will refer to your component.

submitForm() {
  let formData = new FormData();
  formData.append("file", this.file);
  const config = {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  };

  this.axios
    .post(
      "http://localhost/api.php",
      formData,
      config
    )
    .then((data) => { // like this
      this.$emit("serverReturnedData", data);
    })
    .catch(() => {
      console.log("FAILURE!!");
    });
}

Upvotes: 1

Related Questions