Вложенный массив до n дочерний, установите его для параметров

Question

Я разрабатываю модуль категорий, используя laravel в качестве бэкэнда и Vue.js в качестве внешнего интерфейса.

Я использовал эту библиотеку Laravel Nestable

И егодавая желаемый результат.

[
  {
    "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
  }
]

Но проблема в том, как я могу использовать этот вложенный массив до глубины N для параметров в vue.Например:

<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>

И вышеупомянутый желаемый результат не может быть достигнут этим

<option v-for="category in categories" value="category.id">{{category.name}}</option>

Поэтому, если у вас есть какое-либо решение или предложение, пожалуйста, дайте мне знать.

Answer 1

Попробуйте использовать parent_id в данных для добавления - как:

<option v-for="category in categories" value="category.id"><span v-if="category.parent_id">{{getDash(parent_id)}}</span>{{category.name}}</option>

new Vue({
    ...
    computed: {
        getDash: function (parentId) {
          let string = '';
          for(let i = 0; i < parentId; i++) {
            string += '-'
          }
          return string;
        }
    }
    ...
})