老衲as用飘柔 2022-10-09 19:48 采纳率: 100%
浏览 31
已结题

uni-app控制台报错,页面不显示

img

<template>
    <view class="kindList">
        
        <view class="tabBox">
            <view class="item" v-for="(item,index) in tabList" :key="index" @tap="toggleTab(index)">
                <view :class="current == index ? 'active' : ''">
                    {{item.name}}
                </view>
                <view class="iconBox" v-if="index == 1 || index == 2">
                    <uni-icons size="20rpx" type="top" :color="item.currentStatus == 'up' ? '#dd524d' : ''"></uni-icons>
                    <uni-icons size="20rpx" type="bottom" :color="item.currentStatus == 'down' ? '#dd524d' : ''">
                    </uni-icons>
                </view>
            </view>
        </view>
        
        <view class="cont">
            <ul style="list-style: none;">
                <li v-for="item in list" :key="item.id">
                    <image :src="item.pic"></image>
                    <view class="name">
                        {{item.name}}
                    </view>
                    <view class="num">
                        <view class="price">{{item.price}}</view>
                        <view class="intr">不凡</view>
                    </view>
                </li>
            </ul>
        </view>

    </view>
</template>

<script>
    import {
        findProductList
    } from "@/api/kind/kindList/kindList.js";
    export default {
        data() {
            return {
                start: 1,
                limit: 10,
                current: 0,
                list: [],
                tabList: [{
                        name: "新品",
                        currentStatus: "default"
                    },
                    {
                        name: "销量",
                        currentStatus: "default"
                    },
                    {
                        name: "价格",
                        currentStatus: "default"
                    },
                    {
                        name: "筛选",
                        currentStatus: "default"
                    },
                ]
            };
        },
        onLoad(options) {
            // console.log(options.id);
            this.init()
        },
        methods: {
            init() {
                findProductList(this.start, this.limit, {
                    "brandId": "",
                    "categoryId": options.id,
                    "isDesc": 0,
                    "keywords": "",
                    "sortBy": "",
                }).then(res => {
                    console.log("res", res);
                    this.list = res.data.rows;
                })
            },
            toggleTab(index) {
                this.current = index;
                this.tabList.forEach((ele, idx) => {
                    if (index != idx) {
                        ele.currentStatus = "default"
                    }
                })
                if (this.tabList[index].currentStatus == "default") {
                    this.tabList[index].currentStatus = "up"
                } else if (this.tabList[index].currentStatus == "up") {
                    this.tabList[index].currentStatus = "down"
                } else {
                    this.tabList[index].currentStatus = "up"
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import 'kindList.scss'
</style>

uni-app开发过程中遇到的问题,我在 onLoad 中给了值为 options ,然后我在 methods 中用 init() 方法将 findProductList 中的数据封装起来,并且将封装好的 init 给了 onLoad ,结果页面直接啥也不显示,而且控制台还报错options未找到,找不出问题所在,请大家帮忙找找。

  • 写回答

3条回答 默认 最新

  • ironprosper 2022-10-09 20:52
    关注

    onLoad参数中的options不能在methods中直接使用,可以做如下修改

    onLoad(options) {
        // console.log(options.id);
        this.init(options)
    },
    
    init(options) {
        findProductList(this.start, this.limit, {
            "brandId": "",
            "categoryId": options.id,
            "isDesc": 0,
            "keywords": "",
            "sortBy": "",
        }).then(res => {
            console.log("res", res);
            this.list = res.data.rows;
        })
    },
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 创建了问题 10月9日

悬赏问题

  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?
  • ¥15 thingsboard代码编译出错误
  • ¥15 博途v18仿真报错怎么解决
  • ¥15 欧姆龙plc枕式包装机 ST编程
  • ¥15 为啥快手广告联盟的广告这么难出来
  • ¥15 k8s集群重启后,kubelet一直报systemctl restart kubelet.service "Failed to delete cgroup paths"