刚学uniapp,请教下。我下面的getdata函数哪里定义错了?无法调用

刚学uniapp请教下。我下面的getdata函数哪里定义错了?无法调用

<template>    <view>

<view v-for="(item,index) in a2" class="box1" :for="index">
    <view :style="item.l11_30==true?'background-color:#FFB9DC':'background-color:#CCCCCC'">
<view class="box2"><text  Selection space="ensp">借用时间:{{item.l11_4}} text>view>
<view class="box3"><text  Selection space="ensp">记单人:{{item.l11_14}}text>view>

<view class="box2"><text  Selection space="ensp">借用人:{{item.l11_10}} text>view>
<view class="box3"><text  Selection space="ensp">借用教室:{{item.l11_11}}text>view>
    
    <view class="box2"><text  Selection space="ensp">借用周:{{item.l11_17}} text>view>
    <view class="box3"><text  Selection space="ensp">借用星期:{{item.l11_15}}text>view>    
    
    <view class="box2"><text  Selection space="ensp">借用课次:{{item.l11_18}} text>view>
    <view class="box3"><text  Selection space="ensp">借用时间段:{{item.l11_12}}text>view>    
        
        <view class="box2"><text  Selection space="ensp">备注:{{item.l11_8}} text>view>
        view>
view>
    view>
    
    
    
template>

<script>
    
    export default {
        
        data(){
        
        return{
        bga:'#CCCCCC',
        bgb:'#FFB9DC',
        ac:'true',
        a2:[],
        }

        },
    getdata (){
                    //开始请求服务器数据开始
                                uni.request({
                                    url:'http://localhost/app/1.asp',
                                    data: {
                                        id1:'2',
                                        id2:'addoil',
                                        },
                    method: 'post',
                                        header: {
                                               'content-type': 'application/x-www-form-urlencoded',
                                              },
                                        success: (res) => {
                                            console.log(res.data)
                    this.a2 = res.data;
                    
                                        }
                                })
                                
                                //开始请求服务器数据结束
                },
// 触底的事件
onReachBottom() {
    console.log('到了')
  // 让页码值自增 +1
  //this.queryObj.pagenum += 1
},
        onShow: function() {
                getData() //调用加载数据方法
        },
    
    
    }
    
script>

<style>
    .box1{
        margin-top: 15rpx;

     font-size: 25rpx;
border:1px solid rgb(150,150,150);
border-radius:2px;
width: 735rpx;
margin-left: 5rpx;
display: centn;
    }
    .box2{

        text-align: left;

    }
    .box3{
    
     text-align:left;

    }
style>



 
<script>
    
    export default {
        
        data(){
        
        return{
        bga:'#CCCCCC',
        bgb:'#FFB9DC',
        ac:'true',
        a2:[],
        }
 
        },
methods:{ // methods包裹函数
      getdata (){
                    //开始请求服务器数据开始
                                uni.request({
                                    url:'http://localhost/app/1.asp',
                                    data: {
                                        id1:'2',
                                        id2:'addoil',
                                        },
                    method: 'post',
                                        header: {
                                               'content-type': 'application/x-www-form-urlencoded',
                                              },
                                        success: (res) => {
                                            console.log(res.data)
                    this.a2 = res.data;
                    
                                        }
                                })
                                
                                //开始请求服务器数据结束
                },
// 触底的事件
onReachBottom() {
    console.log('到了')
  // 让页码值自增 +1
  //this.queryObj.pagenum += 1
},
        onShow: function() {
                this.getData() //调用加载数据方法
        },
}    
    }
    
</script>
 

首先你要知道uniapp 是基于vue实现的多端兼容的这么一个框架。所以它的写法基本和vue没有区别。vue中定义函数需要写在 methods对象中。还有要养成格式化的习惯...


<script>
    
    export default {
        
        data(){
        
        return{
        bga:'#CCCCCC',
        bgb:'#FFB9DC',
        ac:'true',
        a2:[],
        }
 
        },
methods:{ // methods包裹函数
      getdata (){
                    //开始请求服务器数据开始
                                uni.request({
                                    url:'http://localhost/app/1.asp',
                                    data: {
                                        id1:'2',
                                        id2:'addoil',
                                        },
                    method: 'post',
                                        header: {
                                               'content-type': 'application/x-www-form-urlencoded',
                                              },
                                        success: (res) => {
                                            console.log(res.data)
                    this.a2 = res.data;
                    
                                        }
                                })
                                
                                //开始请求服务器数据结束
                },
// 触底的事件
onReachBottom() {
    console.log('到了')
  // 让页码值自增 +1
  //this.queryObj.pagenum += 1
},
        onShow: function() {
                getData() //调用加载数据方法
        },
}    
    }
    
</script>

改成下面就不报错。但调用就报错


```bash
<script>
    
    export default {
        
        data(){
        
        return{
        a2:[],
        }

        },
 getdata:function(){//开始请求服务器数据开始
                            uni.request({
                                url:'http://localhost/app/1.asp',
                                data: {
                                    id1:'2',
                                    id2:'addoil',
                                    },
                method: 'post',
                                    header: {
                                           'content-type': 'application/x-www-form-urlencoded',
                                          },
                                    success: (res) => {
                                        console.log(res.data)
                this.a2 = res.data;
                
                                    }
                            })
                            
                            //开始请求服务器数据结束
                },
                
// 触底的事件
onReachBottom() {
    console.log('到了')
    this.a2=[...this.a2,...[a2]]
  // 让页码值自增 +1
  //this.queryObj.pagenum += 1
},
        onShow: function() {
                
                   getData() //调用加载数据方法
        },
    
    
    }
    
</script>


   |       ^
vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:3963 [Vue warn]: Error in onShow hook: "ReferenceError: getData is not defined"

(found in pages/jsjy/index.vue)(env: Windows,mp,1.06.2209190; lib: 2.28.1)
warn @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:3963
Vue.config.errorHandler @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:9178
globalHandleError @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:5227
handleError @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:5196
invokeWithErrorHandling @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:5219
Vue.__call_hook @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:9242
_vue.default.__call_hook @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:1947
mpOptions.<computed> @ vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:1461
(anonymous) @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
l.__callPageLifeTime__ @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
wr @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
l.emit @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
emit @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
l.emit @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
emit @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
(anonymous) @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
emit @ WAServiceMainContext.js?t=wechat&s=1674964565968&v=2.28.1:1
c @ VM18467 asdebug.js:10
u @ VM18467 asdebug.js:10
(anonymous) @ VM18467 asdebug.js:1
f @ VM18467 asdebug.js:1
g @ VM18467 asdebug.js:1
(anonymous) @ VM18467 asdebug.js:1
_ws.onmessage @ VM18467 asdebug.js:1
Show 2 more frames
vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:9179 ReferenceError: getData is not defined
    at VueComponent.onShow (index.js?t=wechat&s=1674964565968&v=2890116f402dd9aa32a5cad00d350f57:207)
    at invokeWithErrorHandling (vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:5211)
    at VueComponent.Vue.__call_hook (vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:9242)
    at VueComponent._vue.default.__call_hook (vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:1947)
    at da.mpOptions.<computed> [as onShow] (vendor.js?t=wechat&s=1674964565968&v=0370c81b8eff0377ed9406ead7b2d02a:1461)
    at da.<anonymous> (WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1)
    at da.l.__callPageLifeTime__ (WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1)
    at WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
    at WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1
    at WASubContext.js?t=wechat&s=1674964565968&v=2.28.1:1(env: Windows,mp,1.06.2209190; lib: 2.28.1)
 

```

首先定义方法要写到 methods 中,其次,调用方法要写 this.getData()