3

For example:

<v-checkbox v-for="(v,k) in questionContent.choices" :key="k"
    v-model="answerData[question.id]" @change="saveAnswer(qe.id, question.id)"
    :label="`${k}. ${v}`"
    :value="k"
    hide-details
/>

What is the name of this `${k}. ${v}` feature ?

Eric
  • 22,183
  • 20
  • 145
  • 196
  • 6
    It isn't a Vue feature, it's core JavaScript. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals – skirtle Aug 16 '19 at 14:39
  • Possible duplicate of [What does ${} (dollar sign and curly braces) mean in a string in Javascript?](https://stackoverflow.com/questions/35835362/what-does-dollar-sign-and-curly-braces-mean-in-a-string-in-javascript) – str Aug 16 '19 at 14:55

1 Answers1

4

It just binds a string to the label attribute. In es6 instead of k + ". " + v you can do ${k}. ${v} to concatenate a string. In order to use the "feature", called template literals, the string must be in backticks instead of single or double quotes.

Some of the advantages of using template literals:

  • Makes it easier to use multiline strings
  • Makes it possible to use "nested templates" eg.
const classes = `header ${
  isLargeScreen() ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}`
}`;

intead of doing something like:

let classes = "header";
classes += isLargeScreen()
  ? ""
  : item.isCollapsed
  ? " icon-expander"
  : " icon-collapser";

example from Mozilla. There are also more advantages listed there

SuperDJ
  • 7,488
  • 11
  • 40
  • 74