Ву.Яш - элемент пользовательского интерфейса - сообщения в сообщение
Я использую 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')
У вопроса есть решение - Посмотреть?

Можете ли вы привести пример HTML-макета, который вы хотите? jsfiddle.net/7ugahcfz/1
Источник

Кроме того, это документация для createElement. vuejs.org/v2/guide/render-function.html#createElement-Arguments
Источник

Источник

Может быть, вы можете использовать" диалог " вместо этого : element.eleme.io/#/en-US/component/dialog
Источник
Ответы - Ву.Яш - элемент пользовательского интерфейса - сообщения в сообщение / Vue.js - Element UI - HTML message in MessageBox
Является ответом!

31.05.2017 11:45:22
Я думаю, это то, чего ты хочешь.
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 => {
});
},
}
Пример .

Это именно то, что я искал. Еще раз спасибо вам!

16.09.2019 05:04:37
Вы также можете использовать HTML напрямую и конвертировать в vnodes с помощью 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}})
(Вышеизложенное упрощается без цикла. Просто чтобы понять идею)
Помочь в развитии проекта: