清除对象数组下空的children vue写法

在Vue中处理对象数组并清除某个特定属性（如`children`）为空的情况，通常会使用计算属性或方法来过滤数组。这里提供一个使用计算属性的例子：

假设有一个组件，其数据对象中有一个名为`items`的数组，每个数组元素都有一个`children`属性。我们想要创建一个计算属性，返回一个新的数组，其中不包含任何空的`children`属性。

<template>
  <div>
    <!-- 使用v-for来展示过滤后的items数组 -->
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
        <!-- 如果children存在且不为空，则展示 -->
        <ul v-if="item.children && item.children.length > 0">
          <li v-for="child in item.children" :key="child.id">{{ child.name }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设这是初始数据
      items: [
        { id: 1, name: 'Item 1', children: [{ id: 11, name: 'Child 1-1' }] },
        { id: 2, name: 'Item 2', children: [] },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  computed: {
    // 过滤掉children为空的项
    filteredItems() {
      return this.items.filter(item => item.children && item.children.length > 0);
    }
  }
};
</script>

在这个例子中，`filteredItems`计算属性会遍历`items`数组，并返回一个新数组，该数组只包含`children`属性非空的对象。在模板中，我们通过`v-for`指令来遍历`filteredItems`来展示数据。