wepy中的this.$apply()在什么时候用，以及methods方法中的调用

最新推荐文章于 2022-12-05 23:18:18 发布

原创最新推荐文章于 2022-12-05 23:18:18 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#wepy

wepy 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个用于深能环保的单据选择组件，该组件使用了wepy框架和vant组件库，实现了从服务器获取待扫描的单据列表，并通过radio-group组件让用户选择特定的单据进行后续操作。文章详细展示了组件的模板、脚本和样式代码，以及如何通过fetch请求与后端交互，获取和更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <view class="select">
    <view class='item'>
      <radio-group @change="radioChange">
        <label class="radio"
               wx:for='{{ items }}'
               wx:key='{{index}}'>
          <radio value="{{item.EDOC_NO}}" />
          <view class='item_list'>
            <view>单号: {{item.EDOC_NO}}</view>
            <view>制作单位: {{item.CREATE_TIME}} 单据类型: {{item.EDOC_TYPE}}</view>
          </view>
        </label>
      </radio-group>
    </view>
    <view class='btn'
          @tap='btnSure'>
      确定
    </view>
     <van-notify id="custom-selector" />
    <van-notify id="van-notify" />
  </view>
</template>

<script>
import wepy from 'wepy'
import fetch from '../utils/fetch.js'
import Notify from '../components/vant/notify/notify'
export default class Select extends wepy.page {
  config = {
    navigationBarTitleText: '深能环保',
    'usingComponents': {
      'van-notify': '../components/vant/notify/index'
    }
  }
  onLoad (query) {
    console.log(query)
    this.username = query.username
    this.$apply()
    this.getInfoDetail()
  }
  onShow () {
    // fetch({
    //   url: 'https://yx.seee.com.cn/ashare/edocApp/waitScan',
    //   method: 'POST',
    //   data: {
    //     'PARAMETER': {
    //       // 'USER_NAME': this.username
    //       'USER_NAME': '000955'
    //     }
    //   },
    //   header: {
    //     'content-type': 'application/json' // 默认值
    //   }
    // }).then((res) => {
    //   if (res.data.RESPONSE_HEADER.RESPONSE_STATUS === 'Y') {
    //     Notify({
    //       text: res.data.RESPONSE_HEADER.RESPONSE_MESSAGE,
    //       duration: 1000,
    //       selector: '#custom-selector',
    //       backgroundColor: '#1989fa'
    //     })
    //     if (res.data.RESPONSE_CONTEXT && res.data.RESPONSE_CONTEXT.EDOC_HEADER) {
    //       // this.items = res.data.RESPONSE_CONTEXT.EDOC_HEADER
    //       //  this.items = res.data.RESPONSE_CONTEXT.EDOC_HEADER
    //       this.items = res.data.RESPONSE_CONTEXT.EDOC_HEADER
    //       // this.$apply()
    //       console.log(this.items, 'items')
    //       this.$apply()
    //       // this.$apply()
    //     }
    //   } else {
    //     Notify(res.data.RESPONSE_HEADER.RESPONSE_MESSAGE)
    //   }
    // })
  }
  data = {
    username: '',
    items: [],
    seleted: ''
  }
  methods = {
    // 选择框的状态
    radioChange (e) {
      let value = e.detail.value
      this.seleted = value
      this.$apply()
    },
    // 点击确认跳转页面
    btnSure () {
      // 根据单号 获取任务id
      fetch({
        url: 'https://yx.seee.com.cn/ashare/edocApp/beforeUpload',
        method: 'POST',
        data: {
          'PARAMETER': {
            'EDOC_NO': this.seleted
          }
        },
        header: {
          'content-type': 'application/json' // 默认值
        }
      }).then((res) => {
        if (res.data.RESPONSE_HEADER.RESPONSE_STATUS === 'Y') {
          wepy.navigateTo({
            // 传参数到下一个页面
            // TODO:需要传入一个id值
            url: `/pages/lastStep?id=${res.data.RESPONSE_CONTEXT.BILL_HEADER_ID}&inputName=${this.seleted}`
          })
        }
      })
    }
  }
  getInfoDetail () {
    fetch({
      url: 'https://yx.seee.com.cn/ashare/edocApp/waitScan',
      method: 'POST',
      data: {
        'PARAMETER': {
          // 'USER_NAME': this.username
          'USER_NAME': '000955'
        }
      },
      header: {
        'content-type': 'application/json' // 默认值
      }
    }).then((res) => {
      if (res.data.RESPONSE_HEADER.RESPONSE_STATUS === 'Y') {
        Notify({
          text: res.data.RESPONSE_HEADER.RESPONSE_MESSAGE,
          duration: 1000,
          selector: '#custom-selector',
          backgroundColor: '#1989fa'
        })
        if (res.data.RESPONSE_CONTEXT && res.data.RESPONSE_CONTEXT.EDOC_HEADER) {
          // this.items = res.data.RESPONSE_CONTEXT.EDOC_HEADER
          //  this.items = res.data.RESPONSE_CONTEXT.EDOC_HEADER
          this.items = res.data.RESPONSE_CONTEXT.EDOC_HEADER
          this.$apply()
          console.log(this.items, 'items')

          // this.$apply()
        }
      } else {
        Notify(res.data.RESPONSE_HEADER.RESPONSE_MESSAGE)
      }
    })
  }
}
</script>

<style lang="less">
.select {
  .item {
    .radio {
      height: 150rpx;
      margin-bottom: 30rpx;
      background: #f2f2f2;
      radio {
        transform: scale(0.7);
      }
      display: flex;
      justify-content: space-around;
      .item_list {
        view:nth-child(1) {
          margin-bottom: 10rpx;
          color: #ff0000;
          font-size: 32rpx;
          font-weight: bold;
        }
        view:nth-child(2) {
          color: #515151;
          font-weight: bold;
          font-size: 28rpx;
        }
        margin-top: 30rpx;
      }
    }
  }
  .btn {
    height: 80rpx;
    width: 25%;
    background: #ffa847;
    text-align: center;
    line-height: 80rpx;
    margin: 0 auto;
    border-radius: 15rpx;
    color: #fff;
  }
}
</style>

在你为data里面的数据进行绑定的时候，是需要的。

比如data里面你定义了一个x=''，然后你在自定义的方法里面用this.x=200 之后，需要用this.$apply()来进行数据绑定。这样你在view中绑定data中的x变量时，才会有200，不然就是空

不过有个前提，method里面的方法是不用这个的，但methods里面只能放bindtap这类方法，所以你自己定义的其他方法，或者写在onshow里面，就必须得用this.$apply()。

methods = {

onRemove(e) {

console.log('onRemove', e)

},

imgRemove(e) {

this.methods.onRemove(e)

}