van-picker弹窗无法显示

Question

<van-cell-group>
  <van-cell 
  is-link 
  @click="showPicker = true" 
  title="所属区域"
  required
  :value="value"
  />
</van-cell-group>
<van-popup v-model="showPicker" position="bottom">
<van-picker 
  show-toolbar
  :columns="columns"
  @cancel="showPicker = false"
  @change="onChange"/>
</van-popup>

<script>
    export default {
      data() {
        return {
            value:"请选择",
            showPicker: false,
            columns: ['杭州', '宁波', '温州']
        }
      },
      methods: {
        onChange(value) {
            this.value = value;
            this.showPicker = false;
        }
      }
    };
</script>

点击van-cell的时候弹窗没法显示

点击展示弹窗，选择之后将“请选择”改为选择的内容

Answer 1

<template>
  <div>
      <van-cell
        is-link
        @click="showPicker = true"
        title="所属区域"
        required
        :value="value"
      />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @change="onChange"/>
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        value:"请选择",
        showPicker: false,
        columns: ['杭州', '宁波', '温州']
      }
    },
    methods: {
      onChange(picker, value, index) {
        this.value = value;
        this.showPicker = false;
      }
    }
  }
</script>

<style scoped>

</style>

把方法的参数写全，就可以获取的到

Answer 2

我也遇到雷瑟的。但是还没解决