Как обернуть часть динамического контента в тег при SSR?

Question

[Владимир Голубь]

Задача: обернуть время (формат - 28.09.2020 12:18) в span

Пробую так

<template>
...
  <p class="lf-news-item__date">{{ addTimeSpan(item.date) }}</p>
...
</template>
...
    methods: {
      addTimeSpan(date) {
        if (process.client) {
          let dateArr = date.split(' ');
          let span = document.createElement('span');
          span.innerHTML = dateArr[1];

          return `${ dateArr[0] } ${ span }`
        } else {
          return date;
        }
      }
    },
...

Но вместо span выводит [object HTMLSpanElement]

v-html вообще не работает с функциями.

Как лучше вывести ?

Answer 1

[VegasChickiChicki]

<template>
...
  <p class="lf-news-item__date">
    <span> {{ item.date.split(' ')[0] }} </span>
  </p>
...
</template>

А в чем проблема сделать так?

Comments

[Владимир Голубь]

мне только время

[VegasChickiChicki]

Владимир Голубь, Отредактировал. Зачем городить такую волокиту как у вас - понятия не имею)

Answer 2

[Алексей Ярков]

Может так?

<p class="lf-news-item__date" v-html="addTimeSpan(item.date)"></p>

Comments

[Владимир Голубь]

Все равно выводит [object HTMLSpanElement]

[Алексей Ярков]

Владимир Голубь, ${ span }
А что вы ожидали приводя HTMLSpanElement к строке?

[Владимир Голубь]

Если добавить outerHTML работает