Как обойти проблему кавычек внутри кавычек?

Question

[danilr]

Vue.component('Media',{
  props: {
    order: String
  },
  computed: {
    media(){
      return media.find(item => item.order === this.order);
    }
  },
  mounted(){
    console.log(this.order)
  },

  template: `<div class="media-box">
            <div class="media-img" v-bind:style="{background: `url(img/advantage/${order}-mini.jpg) no-repeat`}" ></div>
            <div class="media-info">
              <div class="media-title">{{media.title}}</div>
              <div class="media-text">{{media.text}}</div>
              <a :href="media.link" class="more-button media-btn">Подробнее</a>
            </div>
            </div>`
});

Вот компонент, его шаблон в косых кавычках - а внутри ещё используются косые кавычки, но от этого всё ломается, как это можно обойти? Не предлагайте плиз делать в теге скрипт или плюсовать константу. Хочу узнать именно как сделать косые кавычки внутри косых кавычек без поломки скрипта.

Comments

[Dima Polos]

\ ?

[Ольга Ветер]

А зачем вам вообще ` перед url ? что мешает использовать одинарную кавычку? '

[Dima Polos]

Ольга Ветер, о, знакомые лица)

Answer 1

[GrayHorse]

\`

`Это – \`экранирование кавычек\`.`

https://learn.javascript.ru/string#spetssimvoly

Answer 2

[Dima Polos]

\

Answer 3

[Антон Антон]

Можно, конечно, экранировать с помощью обратного слеша, но лучше перейти на однофайловые компоненты, или на x-templates, если со сборкой возиться не хочется