Unclosed String Literal - Vue JS Шаблон простой конкатенации

Question

Кто-нибудь может объяснить, почему это происходит? Вы не знакомы с Vue и не понимаете, что не так?

Это работает:

<template>
    <div>
        ...
        <div v-else>
            {{ remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + ':' : '' }}

Однако, когда я пытаюсь добавить диапазон, я получаю ошибку 'unclosed string literal' :

<template>
    <div>
        ...
        <div v-else>
            {{ remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + '<span class="colon">:</span>' : '' }}

Answer 1

В фигурных скобках данные интерпретируются как обычный текст. Для HTML используйте директиву v- html:

<div v-else v-html="remainingHtml">

computed : {
  remainingHtml () {
    return remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + '<span class="colon">:</span>' : '' :
  }
}

https://vuejs.org/v2/guide/syntax.html