CODEWITHSUNDEEP
javascriptvue.jsmethodsboolean
Ren
Ren

Reputation: 171

Cant change data from false to true in vue.js

Im trying to change my data from false to true to conditionally render a button if a payment has succeeded. In my axios call, I receive succeeded as the response in the son object and can console.log it. However, something isn't running correctly because paid still returns false. This should be simple. Any ideas?

<template>
  <div>
    <h1>SUCCESS!</h1>
    <button v-if="paid" v-on:click="confirmPayment">Open PDF</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Success",
  data() {
    return {
      paid: false,
    };
  },
  mounted() {
    axios.get("http://localhost:5000/pay/confirm").then((res) => {
      console.log(res.data.status);
      if (res.data.status == "succeeded") {
        console.log(res.data.status);
        this.confirmPayment();
      }
      console.log(this.paid);
    });
  },
  methods: {
    confirmPayment() {
      this.paid === true;
    },
    getPDF() {
      axios("http://localhost:5000/pdf", {
        method: "GET",
        responseType: "blob", //Force to receive data in a Blob Format
      })
        .then((response) => {
          const file = new Blob([response.data], { type: "application/pdf" });
          const fileURL = URL.createObjectURL(file);
          window.open(fileURL);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
h1 {
  font-family: "Oswald", sans-serif;
  color: white;
}
</style>

Upvotes: 1

Views: 1567

Answers (1)

yusung lee
yusung lee

Reputation: 366

this.paid === true;

should be this.paid = true;

Upvotes: 3

Related Questions