大家好，請原諒我的新手，因為我只是一個初學者。
我正在嘗試使用引導程式或類似的方法將成功圖示添加到我的網頁，但我不確定如何包含下面顯示的 if 陳述句。
如果有任何建議可以幸免，將不勝感激。
這是我的“AddEntry.vue”模板。
<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>
這是我的 index.js 創建入口行
// 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();
});
});
},
uj5u.com熱心網友回復：
您可以使用條件渲染v-if或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/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414927.html
標籤：