Vue.js - Element UI - HTML message in MessageBox

Question

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')

Answer 1

I think this is what you want.

methods: {
  open() {
    const h = this.$createElement;
    let people = this.dataForMessage.map(p => h('li', `${p.name} ${p.gender}`))
    const message = h('div', null, [
      h('h1', "Model wished"),
      h('div', "The data contained in dataForMessage are:"),
      h('ul', people)
    ])
    this.$msgbox({
      title: 'Message',
      message
    }).then(action => {
    });
  },
}

Example.