Vue js - Отображение динамических c html с vue переменными внутри - PullRequest
Новая
       40

Vue js - Отображение динамических c html с vue переменными внутри

0 голосов
/ 27 февраля 2020

Я пытаюсь сделать содержимое страницы динамичным c. Я использую ck-редактор, в который я добавил html контент и использовал те же самые переменные vue внутри него, которые я объявил в файле vue, где я хочу показать данные ck-редактора. Я нашел похожий пост vuejs - «редактирование» html внутри переменной , который прекрасно работает, если я пишу html внутри переменной. Но в моем случае я сохраняю данные в базе данных. Сохраняется правильно с тегами html, без преобразования тегов. Когда я получаю данные, используя ax ios, он возвращает их в виде строки. И я использовал переменную vue, чтобы отобразить это html.

Вот мой код для лучшего понимания: 

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

new Vue({
  el: '#app',
  created() {
    this.getSalesContent();
  },
  data: {
    salesContent: '',
    pageName: 'Sales',
    salesNumber: '987-586-4511'
  },
  computed: {
    htmlText() {
      return `${this.salesContent}`;
      //return this.salesContent;
    }
  },
    methods: {
      getSalesContent(){
        axios.get('api/Sales').then(({ data }) => {  // getting data from DB
          this.salesContent = data.sales; //data.sales have this.pageName and this.salesNumber variables
        });
      }
    }
});

Вот пример данных, сохраненных в db: 

<p style="font-weight:bold"><span style="color:red">{{pageName}}</span>,</p>

<p style="font-weight:bold"><span style="color:red">${this.pageName} ${this.pageName}</span></p>

<p style="font-weight:bold">Contact Sales at ${this.salesNumber}  {{salesNumber}}</span></p>

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

снимок экрана

Может кто-нибудь помочь мне заставить его работать.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020

ИМХО, поскольку salesContent выбирается из БД, это простая строка. Таким образом, ни vuejs, ни vanilla javascript не заменят встроенные переменные их значениями. (Это может быть возможно при использовании eval, но это совершенно не подлежит обсуждению ...) Вы должны сделать это вручную с помощью функции String replace. Как следующее: 

<p style="font-weight:bold"><span style="color:red">{{pageName}}</span>,</p>

<p style="font-weight:bold">Contact Sales at {{salesNumber}}</span></p>

methods: {
      getSalesContent(){
        axios.get('api/Sales').then(({ data }) => {  // getting data from DB
          let salesContent = data.sales; //data.sales have this.pageName and this.salesNumber variables
          salesContent = salesContent.replace(/{{pageName}}/g, this.pageName)
          salesContent = salesContent.replace(/{{salesNumber}}/g, this.salesNumber)
          this.salesContent = salesContent
        });
      }
    }
0 голосов
/ 27 февраля 2020

Согласно документации это не представляется возможным:
https://vuejs.org/v2/guide/syntax.html#Raw - HTML

В частности:

Содержимое span будет заменен значением свойства Html, интерпретируемым как обычные HTML - , привязки данных игнорируются .

Вы можете, как предлагается в этом ответе, просто использовать вычисленные на основе того, что вы получаете с сервера.

...