Как правильно вставить значение в шаблон?

Question

[Andrej Sharapov]

Подскажите, как правильно добавить значения в :stroke-dasharray=""?

<circle v-for="{percent, dash} in cd.content" cx="21" cy="21" r="15.91549430918954" stroke="#49a12f" :stroke-dasharray="percent dash" stroke-dashoffset="25"></circle>

"content": [
            {
                "result": "Lorem ipsum",
                "percent": "96",
                "dash": "4",
                "img": ""
            }
        ],

Срабатывает, только если указываю один :stroke-dasharray=percent таким образом

Answer 1

[Andrej Sharapov]

сделал так "dash": "96 4",, все работает.

<circle cx="21" cy="21" r="15.91549430918954" stroke="#49a12f" :stroke-dasharray="p.dash" stroke-dashoffset="25"></circle>

Answer 2

[Михаил]

`${a} ${b}`

Comments

[Andrej Sharapov]

не срабатывает

<circle v-for="{percent, dash} in cd.content" cx="21" cy="21" r="15.91549430918954" stroke="#49a12f" :stroke-dasharray=`${percent} ${dash}` stroke-dashoffset="25"></circle>

[Михаил]

Andrej Sharapov,

<circle 
  v-for="{percent, dash} in cd.content" 
  cx="21" 
  cy="21" 
  r="15.91549430918954" 
  stroke="#49a12f" 
  :stroke-dasharray="`${percent} ${dash}`"
  stroke-dashoffset="25"
></circle>

[Andrej Sharapov]

Михаил,

<template v-for="(p, index) in cd.content" :key="index">
<p><strong>:</strong> <strong style="color: #49a12f">{{ p.percent }} / 100</strong> {{ p.result }}</p>
<template v-if="p.result">
<div class="chart">
  <svg class="percent" viewBox="0 0 42 42" fill="none">
  <circle cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
    <text fill="#49a12f" x="21" y="26">96</text>
    <circle cx="21" cy="21" r="15.91549430918954" stroke="#bfc3c6"></circle>
    <circle v-for="{percent, dash} in cd.content" cx="21" cy="21" r="15.91549430918954" stroke="#49a12f" :stroke-dasharray="`${percent} ${dash}`" stroke-dashoffset="25"></circle>
  </svg>
</div>
</template>
<template v-else>
<img src="/src/caseimg/coming_soon.png" loading='lazy' alt="coming soon">
</template>
</template>

[Михаил]

Andrej Sharapov, https://codesandbox.io/s/vue-template-k755i

[Andrej Sharapov]

Михаил,
а тут ошибку выдает



Если заменить значения на цифры, все работает.

[Михаил]

Andrej Sharapov, очевидно, вы шаблонную строку пишете в шаблонной строке

[Andrej Sharapov]

Михаил, не понял. можете поправить? по другому не получается. и вынести нельзя, так как это часть шаблона, а не весь шаблон.

[Михаил]

Andrej Sharapov, шаблон у вас где находится, во .vue файле? или в шаблонной строке в template: ?

[Andrej Sharapov]

в template:

[Andrej Sharapov]

Михаил, сейчас пробую переписать в .vue файл, но я пока не умею его подключать ( буду позже читать доки, как доделаю

[Михаил]

Andrej Sharapov, vue-loader для вебпака
если в template, то экранируйте внутренние `

[Andrej Sharapov]

сделал проще, поместил в "dash": "96 4", два значения и все норм работает. Спасибо за помощь.

[Михаил]

Andrej Sharapov, (；一_一)

[Andrej Sharapov]

Михаил, что это значит?)

просто сделал так
"dash": "96 4",

<circle cx="21" cy="21" r="15.91549430918954" stroke="#49a12f" :stroke-dasharray="p.dash" stroke-dashoffset="25"></circle>