vue.js -Element UI-消息框中的HTML消息

Question

我正在使用vue-js 2.3和element-ui。这个问题更特定于MessageBox组件，您可以在此处找到该文档

问题

我希望能够在MessageBox中输入html消息更具体地说，我想通过使用v-for循环显示dataForMessage中包含的数据。

显然，我们可以在消息中插入vnode，但我不知道在哪里可以找到有关语法的一些信息。

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

我认为这就是您想要的。

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 => {
    });
  },
}

示例。

Answer 2

您也可以直接使用HTML，并使用domprops：

转换为Vnodes

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

(以上无循环简化。只是为了获得这个想法(

小提琴