在 vue js 中递归显示下拉列表

Question

我有一个名为 articles 的表名

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中子类别的任何深度动态生成下拉结构。

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