HTML not rendered in vue-swal in vue.js-CodePudding

I'm using this code to render html content in sweet alert popup

Link:

CodePudding user response：

Instead of using title and html, try using the content attribute

// We want to retrieve RatingComponent as a pure DOM node 
let wrapper = document.createElement('div');

// shared state
let state = {
    note: 0
}

// crate component to content
let SampleComponent = Vue.extend({
    data() {
    return {rating: 0}
  },
  watch: {
    rating (newVal) { state.note = newVal }
  },
    template: `
    <div >
      <div><i><b> My Title </b></i></div>
        <p>This is an <em> emaphazied text </em>, <a href="#">links </a><strong>And other tags</strong></p>
    </div>`,
})

let component = new SampleComponent().$mount(wrapper)

Vue.component('job', {
  template: '<button  @click="rate">Click me!</button>',
  methods: {
    rate() {
      this.$swal({
        content: component.$el,
        buttons: {
            confirm: {
            value: 0
          }, 
            close: {
            value: 1
          },
          cancel: {
            value: 1
          }
        }
      }).then(() => {
        this.$swal('Pls accept and  give an upvote if this answer helped');
      })
    }
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app'
});

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

.rating {
  padding: 30px 0 0 0;
}

.vue-star-rating {
    margin: 20px auto;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background-color: #42b983;
  cursor: pointer;
  color: #fff;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-swal"></script>
<div id="app">
  <job></job>
</div>

CodePudding user response：

You should use content to add html tag instead of html and text to the alert refer to https://sweetalert.js.org/guides/

showAlert() {
  const template = `your text should be here <strong'>Text</strong>`;
  this.$swal({
    content: {
      element: "i",
      attributes: {
        innerHTML: `${template}`,
      },
    },
  });
},