Unclosed String Literal - Vue JS Template simple concatenation

Question

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>' : '' }}

Can you create a jsfiddle or codepen example to reproduce the error ? — akuiper
– akuiper, Commented Apr 5, 2020 at 18:22
double quote inside single quote is not allowed. use back tick instead. {{ remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + `<span class="colon">:</span>` : '' }} or use escape before double quote {{ remaining.hours > 0 ? (remaining.hours < 10 ? '0' : '') + remaining.hours + '<span class=\"colon\">:</span>' : '' }} — Md. Jahidul Islam
– Md. Jahidul Islam, Commented Apr 5, 2020 at 18:55

tony19 · Accepted Answer · 2022-07-15 00:58:34Z

1

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

edited Jul 15, 2022 at 0:58

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 5, 2020 at 19:19

ellisdod

1,74411 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unclosed String Literal - Vue JS Template simple concatenation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related