index.js:1 ./src/pages/tabs.js Attempted import error: '@/pages/contractManagement/contractParticulars/view/detailbox' does not contain a default export (imported as 'ContractlDetails').错误原因

你的代码尝试从 '@/pages/contractManagement/contractParticulars/view/detailbox' 模块中导入一个默认导出，但是该模块并没有导出默认值，导致导入失败。你需要检查该模块中是否存在默认导出，如果不存在，则需要修改导入语句，将其改为导入模块中具名导出的变量或函数。例如，可以使用以下方式导入：

import { ContractlDetails } from '@/pages/contractManagement/contractParticulars/view/detailbox';

相关问题

如何解决报错vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'musicSize')" found in ---> <Anonymous> <App> at src/App.vue <Root>在<template> <div> <div class="flex"> <i class="iconfont icon-fanhuijiantou" @click="returntop"></i> <i class="iconfont icon-diandian"></i> </div> <div class="container"> <h5>{{ name }}</h5> <p>{{ alias }}</p> <p>{{ formatNumber(fansCnt) }}</p> <p class="hheight">{{ imageDesc }}</p> <div class="one"> <span>+ 关注</span> <i class="iconfont icon-xiangxiajiantou"></i> </div> </div> <van-tabs v-model="active" class="over"> <van-tab title="主页"> <homePage></homePage> </van-tab> <van-tab title="歌曲" :badge="singerdeatilList.artist.musicSize"> <songView :id="this.id"></songView> </van-tab> <van-tab title="专辑" :badge="singerdeatilList.artist.albumSize"> <album-view :id="this.id"></album-view> </van-tab> <van-tab title="视频" :badge="singerdeatilList.videoCount"> <videoView></videoView> </van-tab> </van-tabs> </div> </template> <script> import { singerDetailsApi, singerFansApi } from "@/api/singer"; import albumView from "@/views/singer/components/albumView.vue"; import homePage from "@/views/singer/components/homePage.vue"; import songView from "@/views/singer/components/songView.vue"; import videoView from "@/views/singer/components/videoView.vue"; export default { components: { albumView, homePage, songView, videoView, }, data() { return { active: 1, singerdeatilList: [], id: "", fansCnt: "", name: "", //歌手姓名 imageDesc: "", //歌手身份 alias: [], //歌手别名 musicSize: "", //音乐数量 albumSize: "", //专辑数量 }; }, methods: { returntop() { this.$router.push("/singerClass"); }, // fn(fans) { // if (fans > 10000) { // return (fans / 10000).toFixed(1) + "万粉丝"; // } // }, }, async created() { try { // 用query页面数据不会丢失 this.id = this.$route.query.id; let { data } = await singerDetailsApi(this.id); let fans = await singerFansApi(this.id); this.singerdeatilList = data.data; // 歌手名字 this.name = this.singerdeatilList.artist.name; // console.log(this.singerdeatilList.artist.name); // 粉丝数量 this.fansCnt = fans.data.data.fansCnt; // console.log(fans.data.data); // console.log(this.singerdeatilList); // 歌手身份 this.imageDesc = this.singerdeatilList.identify.imageDesc; // 歌手别名 this.alias = this.singerdeatilList.artist.alias[0]; } catch (err) { console.log(err); } }, };这段代码里

报错信息显示 `TypeError: Cannot read properties of undefined (reading 'musicSize')`，意味着在模板中使用 `singerdeatilList.artist.musicSize` 时，`singerdeatilList.artist` 为 `undefined`。

这可能是因为在 `created()` 生命周期中，异步请求的数据还没有返回，导致 `singerdeatilList` 为空。因此，可以在模板中增加一个条件判断，当 `singerdeatilList.artist` 存在时才渲染 `:badge` 属性。

例如：

<van-tab title="歌曲" v-if="singerdeatilList.artist" :badge="singerdeatilList.artist.musicSize">
  <songView :id="this.id"></songView>
</van-tab>

这样就可以避免因为数据还未返回而导致的报错问题。

<template> <view class="container"> <swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"> <swiper-item v-for="item in swi" :key="item"> <image class="swiper-imag" :src="item"></image> </swiper-item> </swiper> <tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab> </view> </template> <script setup> import { reactive, ref } from 'vue' const tabs = reactive([ '推荐', '食品', '水果蔬菜', '新款男装', '内衣', '女装', '百货', '医药', '手机', '鞋包' ]) const tabBars = reactive([ { name: '凉拌洋葱' }, { name: '南瓜粥' }, { name: '酸辣土豆丝' }, { name: '西红柿炒鸡蛋' }, { name: '酸菜鱼' }, { name: '糖醋排骨' }, { name: '糖醋鱼' }, { name: '鱼香肉丝' }, ]) const change = (index)=>{ index = index } const swi = reactive([ '../../static/images/banner/1.jpg', '../../static/images/banner/2.jpg', '../../static/images/banner/3.jpg', '../../static/images/banner/4.jpg', '../../static/images/banner/5.jpg', ]) </script> <style lang="scss"> .container { ::v-deep .swiper-con { height: 300rpx; .uni-swiper-wrapper { border-radius: 16rpx; } .swiper-i { border-radius: 16rpx; } .swiper-imag { height: 100%; width: 100%; } } } </style>根据tui-tab标签选项卡绑定他对应的内容并且能滑动跟随

您可以将每个标签对应的内容放在一个数组中，然后使用v-for指令循环渲染出来，并将tab的index绑定到swiper的current属性上，实现切换标签时，滑动跟随的效果。具体代码如下：

<template>
<view class="container">
<swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" :current="currentIndex">
<swiper-item v-for="(item, index) in swi" :key="index">
<image class="swiper-imag" :src="item"></image>
</swiper-item>
</swiper>
<tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab>
<view class="tab-content">
<view class="tab-item" v-for="(item, index) in tabBars" :key="index" :class="{'active': currentIndex === index}">
<text>{{item.name}}</text>
</view>
</view>
</view>
</template>

<script setup>
import { reactive, ref } from 'vue'

const tabs = reactive([
'推荐',
'食品',
'水果蔬菜',
'新款男装',
'内衣',
'女装',
'百货',
'医药',
'手机',
'鞋包'
])

const tabBars = reactive([
{ name: '凉拌洋葱' },
{ name: '南瓜粥' },
{ name: '酸辣土豆丝' },
{ name: '西红柿炒鸡蛋' },
{ name: '酸菜鱼' },
{ name: '糖醋排骨' },
{ name: '糖醋鱼' },
{ name: '鱼香肉丝' },
])

const change = (index) => {
currentIndex = index
}

const swi = reactive([
'../../static/images/banner/1.jpg',
'../../static/images/banner/2.jpg',
'../../static/images/banner/3.jpg',
'../../static/images/banner/4.jpg',
'../../static/images/banner/5.jpg',
])

const currentIndex = ref(0)

</script>

<style lang="scss">
.container {
::v-deep .swiper-con {
height: 300rpx;
.uni-swiper-wrapper {
border-radius: 16rpx;
}
.swiper-i {
border-radius: 16rpx;
}
.swiper-imag {
height: 100%;
width: 100%;
}
}
.tab-content {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.tab-item {
width: 25%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
border-top: 2rpx solid #f5f5f5;
border-left: 2rpx solid #f5f5f5;
&:last-child {
border-right: 2rpx solid #f5f5f5;
}
&:nth-child(4n+1) {
border-left: none;
}
&:nth-last-child(-n+4) {
border-bottom: 2rpx solid #f5f5f5;
}
&.active {
background-color: #f5f5f5;
}
}
}
}
</style>