如何使用 vue.js 将成功图标添加到我的网页？

Question

大家好，请原谅我的新手，我只是一个初学者。

我正在尝试使用 bootstrap 或类似的东西向我的网页添加成功图标，但我不确定如何包含将在下面显示的 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();
          });
      });
    },

Answer 1

可以使用条件渲染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>

如何使用 vue.js 将成功图标添加到我的网页？

How can I add success icons to my web page using vue.js?

html

javascript

vue.js

bootstrap-4