Im trying to figure out a way to split values from a parent classname and add each separate value to each child inside the parent (the number of child elements is variable).

There might be class names with one value or multiple values. The number of child elements matches the values in the block-classname e.g block-25-50-25 will have 3 child elements.

there is an example in JS but Im not sure how to use it in Vue: https://jsfiddle.net/8y9k6at3/

Example

<div class=”block-33-33-33-33”>
<div class=”card”>1</div>
<div class=”card”>2</div>
<div class=”card”>3</div>
<div class=”card”>4</div>
</div>

var pClass = document.querySelector(‘div[class^=block]‘).classList.value.split(‘-‘);
pClass.shift(); // remove the first item

console.log(pClass.shift())

document.querySelectorAll(‘div.card’).forEach(function(el, i){
el.classList.add(‘block__col–’+ pClass[i]);
});

Page.vue

<div
:class=”splitClass” // This returns a classname which could be block-25-50-25 or block-33-33-33 etc
class=”wrapper__content”
\>
<div
v-for=”(contentItem, index) in content.content”
:key=”contentItem[‘id’]“
class=”card” // Block value here.
\>
</div>
</div>

Computed

splitClass() {
const { split } = this.content;
if (split) {
const splitRatio = `block-${split.split(‘/‘).join(‘-‘)}`;
return { [splitRatio]: true };
}
},

this.content

{
“content”: {
“split”:”25/25/50”
}
}

What would be the best method?

Thanks.

Solution :

You just need to bind the class on the divs too

<div
:class=”splitClass” // This returns a classname which could be block-25-50-25 or block-33-33-33 etc
class=”wrapper__content”
\>
<div
v-for=”(contentItem, index) in content.content”
:key=”contentItem[‘id’]“
:class=`card-${contentItem.split(‘/‘)[index]}`
\>
</div>
</div>