Приемы рендера компонентов вместо плейсхолдеров внутри строки во Vue?

Question

[Роман Ямчук]

Есть строка с плейсхолдерами, которая приходит с сервера:
'lorem ipsum dolor [placeholder|1] sit amet [placeholder|2]'.

Нужен способ для рендера компонента вместо плейсхолдеров, либо любой другой способ заменить плейсхолдеры на тег с кнопкой копирования значения.

Answer 1

[Сергей Соколов]

Наверное, есть более разумные решения, но попробуйте использовать динамические компоненты Vue.

Строку разбить на узлы: текстовые и компоненты. Сделать какой-то минимальный компонент для просто-текстовых кусков.

Например, из строки 'lorem ipsum dolor [placeholder|1] sit amet [placeholder|2]'
сделать массив

[
  ['text', 'lorem ipsum dolor'],
  ['copy', 1],
  ['text', 'sit amet'],
  ['copy', 2],
]

если я правильно понял, что каждый из плейсхолдеров копирует значение после вертикальной черты – первый копирует 1, второй 2.

В темплейте перебрать этот массив примерно так

<template v-for="item in items">
  <component :is="text" v-if="item[0] === 'text'">{ item[1] }</component>
  <component :is="copy" v-if="item[0] === 'copy'" :value="item[1]" />
</template>

Comments

[Роман Ямчук]

Как раз в сторону чего то подобного и думал. Спасибо, решение отличное

Answer 2

[Kotaro Hiba]

В теории можно сделать что то такое

<div v-html="serverString" class="container">
После чего в mounted

const placeholders = document.querySelector(placeholder)
placeholderComponent.mount(placholder)

В общем все тоже самое, как мы инициализируем Vue приложение изначально.

Не уверен что данный подход сработает, но пока в голове только такой вариант крутится, если получится, желательно постарайтесь избавится от v-html из за возможности XSS атак.