Initially, the current implementation is not up to par.
Utilizing an image + background offset in this context is not ideal (SVG + v-show would be a more effective and manageable approach).
Here are some key takeaways:
- The outcome will lack quality, resulting in pixelation when zoomed in
- The logic should be incorporated into the template (avoid trying to handle everything within the style section; leverage Vue's capabilities)
- Your example lacks recursion, which is essential for this task
- I've rectified several errors related to best practices and console warnings (consider using ESlint)
Referencing the following example from the documentation is advisable: https://vuejs.org/examples/#tree
For the desired end result, you can utilize the following code snippet:
<template>
<div class="css-treeview">
<ul>
<li v-for="item in list1" :key="item.a">
<input :id="`item-${item.a}`" type="checkbox" />
<label :for="`item-${item.a}`"
:class="[!item.list2.length && 'hide-when-not-needed', item.list2.length && 'open-if-possible']">
{{ item.a }}
</label>
<ul>
<li v-for="item2 in item.list2" :key="item2.a">
<input :id="`item-${item2.a}`" type="checkbox" />
<label :for="`item-${item2.a}`"
:class="[!item2?.list3?.length && 'hide-when-not-needed', item2?.list3?.length && 'open-if-possible']">
{{ item2.a }}
</label>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
data() {
return {
list1: [
{
a: 'Alex',
list2: [{ a: 'Dog' }],
},
{
a: 'Blex',
list2: [{ a: 'Dogoo' }],
},
{
a: 'Clex',
list2: [],
},
],
}
},
}
</script>
<style scoped>
.css-treeview ul,
...
...
/* Remaining CSS styles continue here */
...
...
</style>
A demo showcasing the above concepts is available at this link: View Playground