1

Необходима помощь. Есть Vue компонент. В параметры передается html-строка. Необходимо вывести html в template этого компонента. Да, я знаю про v-html. Но есть одно но. В этом самом html есть двойные фигурные скобки, в которые передается шаблон. Т.е.

<div>
  <div>
    {{user.Name}}
  </div>
  <div>
    {{user.LastName}}
  </div>
</div>

И проблема в том, что в template это конструкция выводится как есть, не подставляя данные из объекта user. Вопрос. Как сделать так, чтобы в template попадал обработанный html?

P.S. Если кто не до конца понял, скину примерный код.

Vue.component("my-component",{
  props: ['templateHtml','user'],
  template: '<div>\
              <p>First html</p>\
              <span v-html="templateHtml.First"></span>\
              <p>Second html</p>\
              <span v-html="templateHtml.Second"></span>\
             </div>'
});

//templateHtml: {
//  First: '<div>{{user.FirstName}}</div>,
//  Second: '<div>{{user.LastName}}</div>,
//}
<my-component template-html="templateHtml" current-user="user"></my-component>

P.S.2. Код скинул для примера. На деле компонент больше и сложнее, но пример перекрестно описывает мою проблему.

1
  • 1
    Возможно тут поможет использование слотов
    – Grundy
    7 мая 2018 в 18:22

2 ответа 2

0

Вот есть пакет: v-runtime-template Кажется именно ваш случай.

2
  • Хотя по ссылке можно найти ответ на вопрос, лучше указать здесь самое главное, а ссылку приводить в качестве источника. Если страница, на которую ведет ссылка, будет изменена, ответ-ссылка может стать недействительным. - Из очереди проверок
    – Air
    8 мая 2018 в 3:43
  • @Air, слишком много тут указывать главного. А ссылка эта никуда не денется 100%. 8 мая 2018 в 6:34
0

Такой вариант не будет работать, при выводе через v-html биндинги не работают.

4
  • Тогда придется парсить как обычную строку? 7 мая 2018 в 11:48
  • Можно передавать только данные, а эти данные уже будут подставляться в компонент. 7 мая 2018 в 12:00
  • В том то и дело, что мне необходимо, чтобы данные вставлялись не в компонент, а в html, который я передаю. А вот этот html уже вставлять в компонент 7 мая 2018 в 12:19
  • Я вас понял. Это просто один из вариантов решения - взять ту верстку что вы передаете, сделать компонент на ее основе, и в этот компонент уже передавать данные. 7 мая 2018 в 15:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.