Show flash message onSubmit form Vue.js

Question

I'm trying to create a contact form, which I have done but now I'm trying to create a submit flash message on submit. When submitted the form goes to a PHP file, but I want to show a message and not redirect.

Here is what I have for the message component which is called FlashMessage

Here is the form





  
    Full name
    
  



  
    Email address
    
  



  
    Department
    
  



  
    Message
      </label>
</div>

<div class="flex mt-6">
  <label class="flex items-center">
    <input type="checkbox" class="form-checkbox" />
    <span class="ml-2">
      I agree to the
      <a href="#" class="underline">privacy policy</a>
    </span>
  </label>
</div>

<div class="flex mt-6">
  <label class="flex items-center">
    <button
      type="submit"
      class="flex items-center py-3 px-6 border rounded bg-gray-800 hover:bg-gray-900 font-medium text-white transition duration-300 ease-in-out"
    >
      <i class="fas fa-paper-plane mr-4"></i>
      Send
    </button>
  </label>
</div>
</form>

<script>
import FlashMessage from "../components/FlashMessage";
import FeaturesWGrid from "../components/FeaturesWGrid";
import Grid from "../components/Grid";
import GridItem from "../components/GridItem";

export default {
  name: "Contact",
  components: {
    FlashMessage,
    FeaturesWGrid,
    Grid,
    GridItem
  },
  methods: {
    onSubmit() {
      show: true;
    }
  }
};
</script>
</code></pre>

<p>contact.php</p>

<pre class="lang-php prettyprint-override"><code><?php
include("/home/hostedca/redacted/includes/api.php");

$api_identifier = "";
$api_secret = "";

$postfields = array(
    "identifier" => $api_identifier,
    "secret" => $api_secret,
    "action" => "OpenTicket",
    "responsetype" => "json",
);

$name = $_POST["name"];
$email = $_POST["email"];
$department = $_POST["department"];
$message = $_POST["message"];

$command = "OpenTicket";
$postData = array(
    "deptid" => "$department",
    "name" => "$name",
    "email" => "$email",
    "subject" => "Contact form Inquiry from $name for $department",
    "message" => "$message",
    "priority" => "Medium",
    "markdown" => false,
);

$adminUsername = "admin";

// Call the localAPI function
$results = localAPI($command, $postData, $adminUsername);
if ($results['result'] == 'success') {
    echo 'Message sent successfully!';
} else {
    echo "An Error Occurred: " . $results['result'];
}
?>
</code></pre>

<p>Not sure where I'm going wrong.</p>

user_8172857 · Answer

show data property should be a prop like :

export default {
  name: "FlashMessage",
  props: {
    message: {
      type: String,
      required: true
    },
   show:{
   type:Boolean,
   default:false
   }
  },
  data() {
    return {

      body: ""
    };
  },

in the Contact component :



....
export default {
  name: "Contact",
  components: {
    FlashMessage,
    FeaturesWGrid,
    Grid,
    GridItem
  },
 data(){
 return{
  showMsg:false,
}
},
  methods: {
    onSubmit() {
      this.showMsg= true;
    }
  }
};

user_7917521 · Answer

You can remove the 'v-show' condition from the child component FlashMessage.vue. Directly use the value in the parent,

Set show with false as default value in the data section. Change the onSubmit() method like follows

export default {
  name: "Contact",
  data:()=>{
    return {
      show:false
    }
  },
  methods: {
    onSubmit() {
      this.show = true;
      setTimeout(()=>{
        this.show = false;
      },3000);
      // rest of your logic
    }
  }
};

While calling the child component add v-if or v-show condition like follow

user_7486313 · Answer

You are not passing show as a prop and it is not declared in the parent, so, instead of declaring it in the data of the child, you should let the parent be in control and pass the variable as a prop as follows:

In the parent:

    
    data(){
         return{
              show:false
         }
    },
    methods:{
         onSubmit(){
             this.show = true;
             setTimeout(() => {
                 this.show = false;
             }, 3000);
         }
    }

And in the child:

```

Show flash message onSubmit form Vue.js

3 Answers