Greetings all and pardon my novice for I am just a mere beginner.
I am attempting to add success icons to my webpage by using bootstrap or something similar but I am unsure on how to include the if statement that will be shown below.
If any advice could be spared it would be greatly appreciated.
Here is my "AddEntry.vue" template.
<template>
<div class="container">
<RmaForm v-model="rmaEntry" />
<ActionButton @click="submitItem()" position="1" classes="fas fa-paper-plane" />
</div>
{{#if alert}}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> Data Added to RMA Log.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{/if}}
</template>
Here is my index.js create entry line
// eslint-disable-next-line
async createRmaEntry({ state }, payload) {
return new Promise((resolve, reject) => {
axios({
method: "post",
url: prefix + "/api/rma",
data: {
rmaEntry: payload,
},
headers: { "Content-Type": "application/json" },
})
.then(function (response) {
//handle success
console.log(response);
resolve(response.data);
})
.catch(function (response) {
//handle error
console.log(response);
reject();
});
});
},
You can use conditional rendering v-if
or v-show
new Vue({ el: "#demo", data() { return { alert: false } }, methods: { load() { // your async call setTimeout( ()=> { this.alert = true }, 1500) } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <div id="demo"> <div class="container"> <.-- <RmaForm v-model="rmaEntry" /> <ActionButton @click="submitItem()" position="1" classes="fas fa-paper-plane" />--> </div> <button @click="load">load data</button> <div v-if="alert" class="alert alert-success alert-dismissible fade show" role="alert"> <strong>Success!</strong> Data Added to RMA Log. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.