Блог

У меня есть html-строка, содержащая некоторые переменные, завернутые в {{}}. Есть ли способ запустить синтаксический анализ html для замены {{}} значениями, которые уже присутствуют в командной таблице

 <div v-html="desc"></div>
 

 desc = "<p>Some text {{aVar}}</p>"
 

Я хотел бы иметь возможность делать что-то вроде

 v-html="parse(desc)" 
 

и {{aVar}} будет заменено фактическим значением, которое доступно
Надеюсь, для этого есть метод Vue, но я определенно могу использовать пользовательский метод и заменить значения самостоятельно.

Спасибо

На данный момент я решил эту проблему с помощью

 function parseHtml(html = "") {
      const expose = {
        player,
      };
      return html.replace(/{{(. ?)}}/g, (_, g) => {
        return _get(expose, g);
      });
    }
 

где _get-это lodash _.получить

Вот так?

 <script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
const parse = (text) => (`<span style="color:red">${text}<span>`)
</script>
<template>
  <input type="text" v-model="msg">
  <div v-html="parse(msg)"></div>
</template>
 

Вдохновленный вашим примером @orbitory, что насчет этого?

API опций

 <script>
export default {
  data() {
    return {
      template: `<p> {{ message }} {{ message2 }}</p>`,
      message: "hello",
      message2: "world",
    };
  },
  methods: {
    parse(html) {
      return html.replace(/{{(. ?)}}/g, (_, g) => {
        return this[g.trim()];
      });
    },
  },
};
</script>

<template>
    <input v-model="message">
    <input v-model="message2">
    <div v-html="parse(template)" />
</template>
 

Демонстрационный пример с полями реактивного ввода.

https://codesandbox.io/s/how-do-i-render-data-inside-an-html-string-in-vue-before-it-is-displayed-x8oq1?file=/src/App.vue

API композиции

 <script setup>
import { ref } from 'vue'
let template = "<p> {{ message }} {{ message2 }} </p>"
let message = ref('hello')
let message2 = ref('world')

let data = { message, message2 }
function parse(html) {
  return html.replace(/{{(. ?)}}/g, (_, g) => {
    return this[g.trim()].value;
  });
}
parse = parse.bind(data)
</script>

<template>
  <input v-model="message">
  <input v-model="message2">
  <div v-html="parse(template)"></div>
</template>
 

Демонстрация с полями реактивного ввода — на примере @tauzN.

Ссылка