My project involves building a category module using Laravel for the backend and Vue.js for the frontend.
I have incorporated the library Laravel Nestable
The library has been successful in producing the desired output.
[
{
"id": 1,
"name": "Category One",
"slug": "category-one",
"child": [
{
"id": 2,
"name": "Category Two",
"slug": "category-two",
"child": [
{
"id": 3,
"name": "Category three",
"slug": "category-three",
"child": [],
"parent_id": 2
}
],
"parent_id": 1
}
],
"parent_id": null
}
]
However, I am facing an issue on how to use this nested array to multiple depths for the options in Vue. For instance:
<option value="1">Category One</option>
<option value="2">-Category Two</option>
<option value="3">--Category Three</option>
<option value="4">---Category Four</option>
<option value="5">Category Five</option>
The desired display above cannot be obtained with:
<option v-for="category in categories" value="category.id">{{category.name}}</option>
If you have any solutions or suggestions, kindly share them with me.