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

Parent component does not receive Vue.js $emit when multiple calls are made in rapid succession

Tips for including an element at the start while creating a map()

Overcome the issue of 'Parsing Error: Kindly verify your selector. (line XX)' in Javascript/AWQL

trigger a border hover effect on an HTML element

Creating a targeted jQueryUI tab focus

Achieving a collapsing navbar on click in Bootstrap 5

What is the best way to view and use the data stored within this JSON object?

What could be causing my JSON product list to not load properly?

Content displayed in the center of a modal

Having difficulties obtaining sorted results for an e-commerce website API using Node.js

How can you retrieve the `categoryIds` key within an object that holds an array of mongodb's `ObjectId(s)` as its value?

Changing the key name for each element in an array using ng-repeat: a guide

What could be causing the constant undefined response when using ajax to post to php?

Tips for incorporating JSON data into an HTML table

Invoking an AJAX function that is not inside the document.ready function

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

Creating a wrapper function for the map method in React

Inquiring about browserify or webpack on a website using node - a few queries to consider

React: Render function did not return any content. This typically indicates that a return statement is missing

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client