Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

props传递过去的值,视图显示正确,但onLoad中打印undefined,方法中使用也是undefined,bug千千万啊 #1462

Closed
littleQing opened this issue Jun 11, 2018 · 9 comments
Labels
inactive Inactive issue, will be auto closed in 7 days

Comments

@littleQing
Copy link

littleQing commented Jun 11, 2018

组件代码:

<template>
  <!-- inline-number -->
  <view>
    <view class="list-center" @tap="handleInlineNumber">
      <image src="./../../assets/icons/del.svg" class="inline-number-add" data-id="{{id}}" id="del"></image>
      <view class="inline-number-label">{{label}}</view>
      <image src="./../../assets/icons/del.svg" class="inline-number-add" data-id="{{id}}" id="add"></image>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
export default class InlineNumber extends wepy.component {
  props = {
    id: {
      type: String,
      default: '0'
    },
    label: {
      type: Number,
      default: 0
    }
  }
  methods = {
    handleInlineNumber (e) {
      let that = this
      that.$emit('inlineNumber', that.label) //undefined
    }
  }
  onLoad () {
    console.log(this.label)  //undefined
  }
}
</script>

父组件代码:

<repeat for="{{prices}}" key="index" index="index" item="item">
          <view class="list-space-between">
            <view>{{item.label}}</view>
            <InlineNumber :id.sync="item.type" :label.sync="item.number"></InlineNumber>
            <view>¥{{item.price}}</view>
          </view>
</repeat>

data = {
prices: [{
        type: '1',
        label: '成人价',
        number: 1,
        price: 30
      },
      {
        type: '2',
        label: '儿童价',
        number: 0,
        price: 20
      },
      {
        type: '3',
        label: '老人价',
        number: 0,
        price: 10
      }]
}
@xuweikang
Copy link

你模板显示的是 label,打印的是id undefined 我都没懂你意思

@littleQing
Copy link
Author

打印label也是一样,模板可以显示正确,但在方法或生命周期onLoad中却拿不到label的值,打印label会是undefined

@zhuman90
Copy link

你组件是遍历调用的?

@wangyequn
Copy link

同问,解决了吗?

@wangyequn
Copy link

props传递过去的值,视图显示正确,但onLoad中打印undefined --来自github的提问

产生的原因

onLoad执行的时候,还没有数据,可能是涉及到一个生命周期的问题,可是wepy对生命周期并不友好,所以,啦啦啦

解决方案

可以看一下官方文档$broadcast的部分
基本思路是利用$broadcast,在获取到数据后对数据进行广播,然后在子组件中获取到数据,有点丑,但是可以用
代码如下:

子组件
  events = {
    getDetail: (detail, $event) => {
      console.log(detail)
    }
  }
父组件
  async getCurriculumInfo () {
    let json = await api.getCurriculumInfo({
      query: this.query
    })
    if (json.data.statusCode === '200') {
      let data = json.data.data
      this.detail = data
    } else {
      tip.error(json.data.message)
    }
    this.$apply()
    // 对获取到的数据进行广播
    this.$broadcast('getDetail', this.detail)
  }

@guanzhentian
Copy link

这几天也遇到了一样的问题,然后其实在文档里有写到:

WePY 1.x 版本中,组件使用的是静态编译组件,即组件是在编译阶段编译进页面的,每个组件都是唯一的一个实例,目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去使用 props, computed, watch 等等特性。

所以props拿不到是必然的,我也被undefined困扰好久。

@ZweiLee
Copy link

ZweiLee commented Jul 21, 2018

@wangwen1220 但这个解决方案是不是会传递冗余数据。

@Ceeson
Copy link

Ceeson commented Sep 5, 2018

之前也遇到这个问题我的做法是,把要循环的数组传入组件,然后在组件里面repeat

@stale
Copy link

stale bot commented Nov 4, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. 因为这个 Issue 最近没有任何有效回复,所以被自动标记为了stale。 如果在未来7天依旧没有任何激活操作,那么该 Issue 将会被自动关闭。 感谢您的提问。

@stale stale bot added the inactive Inactive issue, will be auto closed in 7 days label Nov 4, 2018
@stale stale bot closed this as completed Nov 11, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
inactive Inactive issue, will be auto closed in 7 days
Projects
None yet
Development

No branches or pull requests

7 participants