vue3 nutui.jd 组件商品分类组件右侧数据渲染不出来？

Z时代
2024-02-23
分类：IT

<template>
  <nut-category :category="category" @change="changeText">
    <nut-categorypane
      type="text"
      :categoryChild="categoryChild"
      @onChange="onChange"
    >
    </nut-categorypane
  ></nut-category>
</template>
<script>
import { reactive, toRefs, onMounted } from 'vue';
export default {
  setup() {
    const data = reactive({
      categoryInfo: {},
      category: [{}],
      categoryChild: []
    });
    onMounted(() => {
      setTimeout(() => {
        getData();
      }, 500);
    });
    const getData = () => {
      fetch('https://storage.360buyimg.com/nutui/3x/categoryData.js')
        .then((response) => response.json())
        .then((res) => {
          console.log('res', res)
          const { categoryInfo, categoryChild } = res;
          data.categoryInfo = categoryInfo;
          data.category = categoryInfo.category;
          data.categoryChild = categoryChild;
        })
        .catch((err) => console.log('Oh, error', err)); 
    };
    const changeText = (index) => {
      data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children);
        console.log(data.categoryChild)
    };
    const onChange =()=>{
      console.log("当前分类数据");
    }
    return {
      changeText,
      onChange,
      ...toRefs(data)
    }
  }
};
</script>