Question

我正在使用vue-js 2.3和element-ui。此问题更具体针对MessageBox组件，您可以在其中找到文档here

问题

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

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

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

Example

Answer 2

您还可以直接使用html并通过使用domProps转换为vnode：

if(response.StartsWith("<ResponseType_1>"))
{
  responseType = typeof(ResponseType_1);
}
else if(response.StartsWith("<ResponseType_2>"))
{
  responseType = typeof(ResponseType_2);
}

（上面的代码没有循环就简化了。只是为了理解这个想法）

Fiddle

Vue.js - 元素UI - MessageBox

问题

2 个答案: