• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

132
Vistas
HTML not rendered in vue-swal in vue.js

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

Link: https://www.npmjs.com/package/vue-swal

  this.$swal({
      title: '<i>Custom HTML</i>',
  html:`This is an <em> emaphazied text </em>, <a href="#">links</a><strong>And other tags</strong>`,
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
});

but html content is not rendered, title is shown but in title also html is not rendered.

Output: enter image description here

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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 class="rating">
      <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 class="btn" @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>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

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}`,
      },
    },
  });
},
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda