CODEWITHSUNDEEP
javascriptvue.jstemplatesconcatenation
Travis Cornelius
Travis Cornelius

Reputation: 75

Unclosed String Literal - Vue JS Template simple concatenation

Can anyone explain why this is happening? New to Vue, and don't understand what's wrong?

This works:

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

However when I try to add a span, I get the 'unclosed string literal' error:

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

Upvotes: 0

Views: 707

Answers (1)

ellisdod
ellisdod

Reputation: 1734

The curly brackets interpret the data as plain text. For HTML use the v-html directive:

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

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

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

Upvotes: 1

Related Questions