在vue js中递归显示下拉菜单

【问题标题】：Recursively display dropdown in vue js在vue js中递归显示下拉菜单
【发布时间】：2021-08-19 13:09:34
【问题描述】：

我有一个名为 items 的表名

id   parent_id  title
1        0      Profile
2        1      About Us
3        1      Why Us?
4        0      Kbow Us

现在我想在 vue laravel 上创建下拉菜单，以便它以适当的缩进方式递归地显示父类别下的子类别或 - 根据深度进行标记。例如：

<select>
<option value="1">Profile</option>
<option value="2">-About Us</option>
<option value="3">--Why Us</option>
<option value="4">Kbow Us</option>
</select>

我想为 vue js 中任何深度的子类别递归地动态生成下拉结构。

【问题讨论】：

标签： vue.js

【解决方案1】：

您必须使用v-for 在 vue.js 中创建 for loop。

您可以使用"-".repeat(option.parent_id) 添加与 parent_id 成比例的短划线数。

new Vue({
  el: '#root',
  data: {
    options: [
      {'id': 1,'parent_id': 0,'title': 'Profile'},
      {'id': 2,'parent_id': 1,'title': 'About Us'},
      {'id': 3,'parent_id': 2,'title': 'Why Us?'},
      {'id': 4,'parent_id': 0,'title': 'Kbow Us'}
    ],
    selectedValue: 1
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <select v-model="selectedValue">
    <option v-for="option in options" :value="option.id">
      {{"-".repeat(option.parent_id)}}{{option.title}}
    </option>
  </select>
  <p> Selected id: {{selectedValue}}</p>
</div>

【讨论】：