带有Vue的循环中的临时变量

Question

我正在使用Vue + Vuetify，在这里尝试使用treeview component建立带有链接的菜单。

源是一个嵌套的json，我的问题是我想将父级“ to”与子级“ to”连接起来，这样我就可以浏览完整路径，例如：link2 / link3

JSON：

items: [
{
  id: 1,
  level: 1,
  name: 'link 1',
  children: [],
  to: 'link1',
},
{
  id: 2,
  level: 1,
  name: 'link2',
  to: 'link2',
  children: [
    { id: 3, level: 2, name: 'link 3', to: 'link3' },
    {
      id: 4,
      level: 2,
      name: 'link 4',
      to: 'link4',
      children: [
        { id: 5, level: 3, name: 'link 5', to: 'link5'},
        { id: 6, level: 3, name: 'link 5', to: 'link5'},
      ],
    }
  ]
}

]

我的树状视图：

<v-treeview
  :items="items"
  item-key="name"
  dense
  hoverable
  open-on-click
  hide-details="true"
>
  <template
    slot="label"
    slot-scope="{ item }"
  >
    <nuxt-link
      :to="buildLink(item)"
      class="menu-item"
    >
      {{ item.name }}
    </nuxt-link>
  </template>
</v-treeview>

Vue代码：

export default {
 data () {
   return {
     urlPath: [],
   }
 },
 methods: {
   buildLink (item) {
    const level = item.level - 1
    if (level > this.urlPath.length) {
      this.urlPath.push(item.to)
    } else if (level - 1 < this.urlPath.length) {
      this.urlPath.splice(
        level,
        this.urlPath.length - level,
        item.to,
      )
    } else if (level === this.urlPath.length) {
      this.urlPath[this.urlPath.length - 1] = item.to
    }
    return this.urlPath.join('/')
  },
},
 }
}

此代码几乎可以正常工作，这意味着将显示菜单，但是错误You may have an infinite update loop in a component render function，这是因为我正在更改方法中的数据。我该怎么做才能使这项工作有效？

Answer 1

我认为我们可以通过简单地使用递归来实现。您可以使用以下示例设置附加链接：

var items = [
{
  id: 1,
  level: 1,
  name: 'link 1',
  children: [],
  to: 'link1',
},
{
  id: 2,
  level: 1,
  name: 'link2',
  to: 'link2',
  children: [
    { id: 3, level: 2, name: 'link 3', to: 'link3' },
    {
      id: 4,
      level: 2,
      name: 'link 4',
      to: 'link4',
      children: [
        { id: 5, level: 3, name: 'link 5', to: 'link5'},
        { id: 6, level: 3, name: 'link 5', to: 'link5'},
      ],
    }
  ]
}
];


const getItems = () => {
this.items = this.items.map(x=> {
    if(x.children && x.children.length) {
    x.children = getPopulatedChildren(x.children, x.to);
  }
  return x;
});
console.log(this.items);
return this.items;
}

选项1：如果仅要将链接与父项合并。例如，对于链接5，它将类似于link4 / link5，然后getPopulatedChildren将是

const getPopulatedChildren = (children, to) => {
  return children.map(x=> {
    if(x.children && x.children.length) {
      x.children = getPopulatedChildren(x.children, x.to);
    }
    return {...x, to: to+'/'+x.to}; 
  });
}

选项2：如果要将链接与所有父项合并。例如，对于链接5，它将类似于link2 / link4 / link5，然后getPopulatedChildren将是

const getPopulatedChildren = (children, to) => {
    return children.map(x=> {
    x.to = to+'/'+x.to;
    if(x.children && x.children.length) {
        x.children = getPopulatedChildren(x.children, x.to);
    }
    return x; 
  });
}

请确保更新树视图并调用getItems函数以获取具有更新链接的项目

<v-treeview
  :items="getItems()"
  item-key="name"
  dense
  hoverable
  open-on-click
  hide-details="true"
>
  <template
    slot="label"
    slot-scope="{ item }"
  >
    <nuxt-link
      :to="item.to"
      class="menu-item"
    >
      {{ item.name }}
    </nuxt-link>
  </template>
</v-treeview>