popup-picker动态添加选项失败

[VinceXie]

Version

0.0.117

Android or iOS, which browser?

chrome

Your Codes

<popup-picker  :data="cities" :columns="2" :value.sync="value4" show-name></popup-picker>
动态添加选项
this.cities.push({
        name: '广东',
        value: '广东',
        parent: 0
      })
      this.cities.push({
        name: '广州',
        value: '广州',
        parent: '广东'
      })

Expected behavior and actual behavior.

打log可以看到列表的数据是无误的，但显示不出来。

Steps to reproduce the problem

[iflamed]

Reset and render the scroller may be helpful

[VinceXie]

@iflamed 具体应该怎么做才能重绘呢？
@airyland 我看了一下源码应该是picker内的列data只在created阶段生成，因此后续的更改没有响应到。希望对你有帮助。

vux/src/components/picker/index.vue：

  created () {
    if (this.columns !== 0) {
      const length = this.columns
      this.store = new Manager(this.data, length)
      this.data = this.store.getColumns(this.value)
    }
  },

[airyland]

@VinceXie 收到，我去检查一下

[VinceXie]

@airyland 还是有bug。
现在往初始化后的data数组添加数据可用，但如果data指向另外一个数组则会出错。我怀疑移除里面的数据也会出错。

value2name.js:line 11      Uncaught TypeError: Cannot read property 'name' of undefined

原因：因为value经过初始化后已经被赋值为一个default值，然后data指向新数组或移除default值的话，value的值便找不到data所对应的数据而出错

解决方法：data每次改动后，value重新遍历data看能否找到对应数据，找不到的话重新赋予一个default值。

希望尽快修复。谢谢。

[airyland]

@VinceXie 你是拉取代码测试的吗？给个重现demo

[VinceXie]

我在自己的项目上测试的。 你在https://github.com/airyland/vux/blob/master/src/demos/Popup-picker.vue 的组件里添加如下代码应该可以复现：

ready () {
    this.list3 = [{
        name: 'a',
        value: 'a',
        parent: 0
      }, {
        name: 'b',
        value: 'b',
        parent: 0
      }, {
        name: 'c',
        value: 'c',
        parent: 'a'
      }, {
        name: 'd',
        value: 'd',
        parent: 'b'
      }]
}

对data数组重新赋值value就找不到数据而崩了。

[airyland]

你确定你拉取了开发代码测试？这个版本还没发布。

[VinceXie]

我拉取的是0.0.117，那我拉取最新的开发代码测试一下吧。

[airyland]

等下我发个dev版本的npm包你再试下，我以为你clone了代码测试。

[VinceXie]

不过我picker的代码是手动同步到最新的

[VinceXie]

好 发了dev版本跟我说一声。

[VinceXie]

@airyland 我拉取了master中sha1为e33b17682f7806aaa285ab207a4597bf10244a61的最新版本添加如上代码，bug依然复现。
src/demos/Popup-picker.vue

<template>
  <div>
    <group title="single column">
      <popup-picker :title="title1" :data="list1" :value.sync="value1"></popup-picker>
    </group>
    <br>
    <div class="picker-buttons">
      <x-button type="primary" @click="changeList10">重新赋值列表</x-button>
      <x-button type="primary" @click="changeList11">push方式更改列表</x-button>
    </div>
    <group title="double columns">
      <popup-picker :title="title2" :data="list2" :value.sync="value2"></popup-picker>
    </group>
    <br>

    <group title="chained columns">
      <popup-picker :title="title3" :data="list3" :columns="3" :value.sync="value3"></popup-picker>
      <popup-picker :title="title4" :data="list3" :columns="3" :value.sync="value4" show-name></popup-picker>
    </group>

    <br>
    <div class="picker-buttons">
      <x-button type="primary" @click="changeList21">push方式更改列表</x-button>
    </div>

  </div>
</template>

<script>
import { PopupPicker, Group, Picker, XButton } from '../components'

export default {
  ready () {
//    console.log(this.list3)
    this.list3 = [{
      name: 'a',
      value: 'a',
      parent: 0
    }, {
      name: 'b',
      value: 'b',
      parent: 0
    }, {
      name: 'c',
      value: 'c',
      parent: 'a'
    }, {
      name: 'd',
      value: 'd',
      parent: 'b'
    }]
  },
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton
  },
  methods: {
    changeList10 () {
      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
    },
    changeList11 () {
      this.list1[0].push('我是push条目')
    },
    changeList20 () {

    },
    changeList21 () {
      this.list3.push({
        name: '美国002_007',
        value: '0007',
        parent: 'usa002'
      })
    }
  },
  data () {
    return {
      title1: '手机机型',
      title2: '详细机型',
      title3: '联动显示值',
      title4: '联动显示文字',
      list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
      list2: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']],
      list3: [{
        name: '中国',
        value: 'china',
        parent: 0
      }, {
        name: '美国',
        value: 'USA',
        parent: 0
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china'
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china'
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA'
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA'
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001'
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001'
      }, {
        name: '广西001',
        value: 'gx001',
        parent: 'china002'
      }, {
        name: '广西002',
        value: 'gx002',
        parent: 'china002'
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001'
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001'
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002'
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002'
      }],
      value1: ['iPhone'],
      value2: ['iPhone', '华为3'],
      value3: [],
      value4: []
    }
  }
}
</script>

<style scoped>
.picker-buttons {
  margin: 0 15px;
}
</style>

[airyland]

看起来不是Picker底层的问题了，是popup picker 转换key和value出现的问题。一时没时间处理，有空可以发个PR。

[transtone]

而且取消好像有问题，取消之后，值还是改变了。

[airyland]

@transtone 已经修复了。等发布吧。

[liu7923032]

@airyland 这个动态赋值的功能什么时候能够解决

Version

0.1.2

Android or iOS, which browser?

chrome

Your Codes

组件

方法

this.list4 = [{ name: 'EE', value: 4, parent: 0 },
{ name: 'FF', value: 5, parent: 0 },
{ name: 'GG', value: 6, parent: 0 }]

错误提示

Cannot read property 'name' of undefined

[airyland]

@liu7923032 list4默认值是什么？

[liu7923032]

list4: [{ name: 'AA', value: 0, parent: 0 },
{ name: 'BB', value: 1, parent: 0 },
{ name: 'cc', value: 2, parent: 0 }]

[airyland]

默认value是什么

[liu7923032]

@airyland 默认是空数组 []

[liu7923032]

@airyland 在我这边的系统设计中，一般都是key/value类型的数据，我目前解决的方法是通过popup/selector来展示选项,但是我感觉popup-picker更加友好，但是目前popup-picker对 key/value支持不是特别友好

[kevinlvhsl]

引用picker组件，import Picker from 'vux/dist/components/picker components: {Picker}一直报一个错Uncaught TypeError: Cannot read property 'length' of undefined， picker只有一个title属性picker(title="闹钟时间"), 这是因为版本"version": "0.1.2"中有问题吗？

[Baiang]

@kevinlvhsl 我也遇到这个问题

[kevinlvhsl]

@Baiang 必须赋初始选中值。 感觉应该修复一下这个问题， 没有初始选中值的时候,默认用第一项

[nigelvon]

这个组件的文档貌似没有只能看 demo。
如果不加 columns 这个属性就不支持 name-value 结构的数据。
希望能够支持，大部分需求一般都是value 和展现的内容对应的。

[airyland]

I think I did fix it, finally..
https://vux.li/#!/issue/189

[taurusser]

我这样解决，有点ugly: )
import map from 'array-map'
import find from 'array-find'

export default function (value, list, delimiter) {
if (!delimiter) {
delimiter = ' '
}
let rs = map(value, (one, index) => {
if (list.length && Object.prototype.toString.call(list[0]) === '[object Array]') {
return find(list[index], item => {
return item.value === one
})
} else {
return find(list, item => {
return item.value === one
})
}
})
return map(rs, one => {
if (typeof one === 'undefined' || !one.hasOwnProperty('name')) {
return null
}
return one.name
}).join(delimiter).replace('--', '')
}