uni-app v-for Cannot read property ‘0‘ of undefined

不是uni-app DEMO 【web】

template

<template>
  <div v-for="(item, index) in data" :key="index">
    <span style="color:pink">{{ item.id }} </span>
    <span style="color:aqua">{{ item.name }} </span>
    <div v-for="(it, idx) in item.children.slice(0, 1)" :key="idx">
      <span style="color: red" @click="handleClick(it.id)">{{ it.id }}</span>
      {{ it.name }}
    </div>
  </div>
</template>

js

<script lang="ts">
import {
  defineComponent,
} from "vue";

export default defineComponent({
  name: "AddGoods",
  setup() {

    const data = [
      {
        id: "1",
        name: 'name 1',
        children: [
          {
            id: "1-1",
            name: "name 1-1"
          },
          {
            id: " 1-2",
            name: "name 1-2"
          }
        ],
      },
      {
        id: "2",
        name: 'name 2',
        children: [
          {
            id: "2-1",
            name: "name 2-1"
          },
          {
            id: "2-2",
            name: "name 2-2"
          }
        ],
      },
      {
        id: "3",
        name: 'name 3',
        children: [
          {
            id: "3-1",
            name: "name 3-1"
          },
          {
            id: "3-2",
            name: "name 3-2"
          }
        ],
      }
    ];

    const handleClick = (id: string) => {
      console.log('id is', id)
    };

    return {
      data,
      handleClick,
    };
  },
});

在Web端可以打印结果

console.log() 可以打印出来的！

---

uni-app DEMO 【小程序】

template

<template>
  <view>
    <view v-for="(item, index) in data" :key="index">
      <text style="color:pink">{{ item.id }} </text>
      <text style="color:aqua">{{ item.name }} </text>
      <view v-for="(it, idx) in item.children.slice(0, 1)" :key="idx">
        <text style="color: red" @click="handleClick(it.id)">{{ it.id }}</text>
        {{ it.name }}
      </view>
    </view> 
  </view>
</template>

js

<script lang="ts">
import { defineComponent} from "vue";


export default defineComponent({

  setup() {
    const data = [
      {
        id: "1",
        name: 'name 1',
        children: [
          {
            id: "1-1",
            name: "name 1-1"
          },
          {
            id: " 1-2",
            name: "name 1-2"
          }
        ],
      },
      {
        id: "2",
        name: 'name 2',
        children: [
          {
            id: "2-1",
            name: "name 2-1"
          },
          {
            id: "2-2",
            name: "name 2-2"
          }
        ],
      },
      {
        id: "3",
        name: 'name 3',
        children: [
          {
            id: "3-1",
            name: "name 3-1"
          },
          {
            id: "3-2",
            name: "name 3-2"
          }
        ],
      }
    ];
    const handleClick = (id: string) => {
      console.log('id is', id)
    };

    return {
      data,
      handleClick,
    };
  },
});
</script>

在 小程序打印结果 【ERROR】

好了，web端和 uni-app小程序端的结果我说完了
那如何解决呢？

我的建议是 重构数据
小程序端的时候，
第一层 用了 v-for
第二层 用了 v-for 并且还用了一个方法 就是slice()
所以我想说的是这里出错了
建议：

 const newData = data.map((i) => {
      return {
        ...i,
        sliceData: i.children.slice(0, 1),
      }
    });

然后我们就利用这个 newData 就可以了

uni-app v-fo指令 GitHub issue