Vue.js - Element UI - HTML message in MessageBox

user_6068447 0
Viewed 6651

I'm using vue-js 2.3 and element-ui. This question is more specific to the MessageBox component for which you can find the documentation here

Problem

I'd like to be able to enter html message in the MessageBox More specifically I would like to display the data contained in dataForMessage by using a v-for loop.

Apparently, we can insert vnode in the message but I have no idea where to find some information about the syntax.

https://jsfiddle.net/7ugahcfz/

var Main = {
   data:function () {
   return {
    dataForMessage: [
     {
        name:'Paul',
        gender:'Male',
      },
      {
        name:'Anna',
        gender:'Female',
      },
    ],
   }
   },
    methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: 'Message',
          message: h('p', null, [
            h('span', null, 'Message can be '),
            h('i', { style: 'color: teal' }, 'VNode '),
            h('span', null, 'but I would like to see the data from '),
             h('i', { style: 'color: teal' }, 'dataForMessage'),
          ])
        }).then(action => {
        });
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
vuejs2 vue.js
2 Answers

You can also use html directly and convert to vnodes by using domProps:

const html = '<div><h1>Model wished</h1><div>The data contained in dataForMessage are:</div><ul><li>Paul Male</li><li>Anna Female</li></ul></div>'
const message = h("div", {domProps:{innerHTML: html}})

(The above is simplified without the loop. Just to get the idea)

Fiddle

user_2344660
Related