[Vuejs]-How can I conditionally render raw HTML with v-html inside a nested v-for loop in Vue.js?

by

0👍

✅

Something like this, if it was possible:

<div v-if="stringNumber === 0 && fretMark2.indexOf(fret) >= 0 ? true : false">{{ <div class="fret-mark-2"></div> }}</div>

But of course in Vue2 we can’t render raw HTML with interpolation – we have to use v-html.

You don’t actually need to use string interpolation or v-html for this. You can simply add v-if to the conditional <div>:

<div v-for="fret in numberOfFrets" ...>
  <div v-if="stringNumber === 0 && fretMark2.indexOf(fret) >= 0"
       class="fret-mark-2">
  </div>
</div>

In this case, div.fret-mark-2 would only be added to the DOM if the v-if condition evaluates to true.

updated fiddle

👤tony19

Leave a comment