Vuejs - слоты, отображающие бессмысленные свойства

Question

В настоящее время у меня возникают проблемы с передачей необработанного HTML (формы сущности) в слот для выделения синтаксиса.

Представьте себе такой слот;

<template v-slot:code-snippet>&lbrace;&lbrace; product.title &rbrace;&rbrace;</template>

Я получаю ошибку

[Vue warn]: Property or method 'product' is not defined on the instance but referenced during render

что сводится к {{ product.title }} - удалите это, и он отлично работает.

Могу ли я в любом случае сказать экземпляру, чтобы он прекратил попытки визуализировать эти "свойства", поскольку они должны интерпретироваться как простой текст?

С уважением

Answer 1

Как уже отмечалось, вы можете использовать v-pre. Я бы сказал, что это правильный ответ, но стоит отметить, что есть и другие способы сделать это. Возможно, при наличии других ограничений они могут быть полезны.

Взлом 1:

Переместите проблемную строку в data свойство:

<template v-slot:code-snippet>{{ code }}</template>

data () {
  return {
    code: '{{ product.title }}'
  }
}

Взлом 2:

Оберните все в интерполяцию и добавьте немного экранирования строки JS:

<template v-slot:code-snippet>{{ '\u007b\u007b product.title \u007d\u007d' }}</template>

В зависимости от обстоятельств его также можно адаптировать для работы с v-text или v-html по мере необходимости.

Answer 2

Для всех, кому нужна помощь, просто оберните содержимое, идущее в слот, с помощью <div v-pre>;

<template v-slot:code-snippet><div v-pre>{{ $component->renderCode() }}</div></template>

Кажется, что div не проходит через слот.