Vue.js does not display HTML properly within the vue-swal component

Question

Vue.js does not display HTML properly within the vue-swal component

I'm currently working on integrating HTML content into a Sweet Alert popup using this code snippet

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

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

However, I am facing an issue where the HTML content is not being rendered properly. The title is visible but even within the title, the HTML is not rendered as expected.

Output: https://i.stack.imgur.com/5wz4A.png

javascript vue.js vuejs2

Answer 1

Answer №1

For a different approach, consider utilizing the content attribute instead of using title and html

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

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

// Create component for 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> emphasized 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('Please accept and give an upvote if this answer helped');
      })
    }
  }
});

//Create a new Vue instance and attach it to our div element 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>

Answer 2

For a different approach, consider utilizing the content attribute instead of using title and html

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

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

// Create component for 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> emphasized 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('Please accept and give an upvote if this answer helped');
      })
    }
  }
});

//Create a new Vue instance and attach it to our div element 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>

Answer 3

Answer №2

It's recommended to use content for inserting HTML tags instead of mixing HTML and text in the alert message. For more information, you can refer to

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

Answer 4

It's recommended to use content for inserting HTML tags instead of mixing HTML and text in the alert message. For more information, you can refer to

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

Vue.js does not display HTML properly within the vue-swal component

Answer №1

Answer №2

Similar questions

MongoDB and Node.js encounter unexpected outcomes due to undefined variables

Trouble with retrieving JSON data?

What steps can I take to prevent the user from clicking on a different edit button for another row?

Is there a way to make Phpstorm identify and acknowledge the usage of NextJS pages?

Creating elegant Select Dropdown Box in AngularJS without relying on images

Which property is best suited for styling a phone number field in the MUI data grid in ReactJS?

What is the best way to route a localpath to a different page including parameters in Nuxt Js?

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

The duration of recorded audio in JavaScript is unclear

What is the purpose of using double quotes within single quotes in JavaScript?

Tips for shortening extra text in a non-wrapping HTML table cell and adding "..." at the end

Utilizing the principles of object orientation in Javascript to enhance event management

Express JS backend causing CSS file to fail to load in React project

Error encountered while trying to update a record using NodeJS, Express, and MySQL modules due to SQL syntax

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

React application encountering issues with the use of Redux actions within a custom module

Identifying text within a paragraph using JavaScript regex, excluding any URLs mentioned

Tips for transferring form data from a React frontend to the backend Node.js server

Drop-down options disappear upon refreshing the page

Getting access to the properties of an array containing objects