Vue.js - 요소 UI - MessageBox의 HTML 메시지

Vue.js - 요소 UI - MessageBox의 HTML 메시지

사용하고 있다vue-js 2.3그리고.element-ui이 질문은 보다 구체적입니다.MessageBox여기서 매뉴얼을 찾을 수 있는 컴포넌트

문제

들어갈 수 있으면 좋겠습니다.html의 메시지MessageBox구체적으로는, 에 기재되어 있는 데이터를 표시하고 싶습니다.dataForMessage를 사용하여v-for고리.

보아하니, 우리는 그 안에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')

이게 네가 원하는 거라고 생각해.

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

예.

html을 직접 사용하여 domProps를 사용하여 vnode로 변환할 수도 있습니다.

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

(상기는 루프를 사용하지 않고 단순해집니다.아이디어를 얻기 위해서)

만지작거리다

언급URL : https://stackoverflow.com/questions/44294060/vue-js-element-ui-html-message-in-messagebox