Vux: popup-picker动态添加选项失败

Created on 19 May 2016  ·  27Comments  ·  Source: airyland/vux

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

High Priority
Source
picture VinceXie

Most helpful comment

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

picture liu7923032 on 12 Jul 2016
👍3

All 27 comments

Reset and render the scroller may be helpful

iflamed picture iflamed on 19 May 2016

@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)
    }
  },
VinceXie picture VinceXie on 19 May 2016

@VinceXie 收到，我去检查一下

airyland picture airyland on 19 May 2016

@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值。

希望尽快修复。谢谢。

VinceXie picture VinceXie on 20 May 2016

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

airyland picture airyland on 20 May 2016

我在自己的项目上测试的。 你在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就找不到数据而崩了。

VinceXie picture VinceXie on 20 May 2016

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

airyland picture airyland on 20 May 2016

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

VinceXie picture VinceXie on 20 May 2016

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

airyland picture airyland on 20 May 2016

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

VinceXie picture VinceXie on 20 May 2016

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

VinceXie picture VinceXie on 20 May 2016

@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>
VinceXie picture VinceXie on 20 May 2016

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

airyland picture airyland on 20 May 2016

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

transtone picture transtone on 15 Jun 2016

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

airyland picture airyland on 15 Jun 2016

@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

liu7923032 picture liu7923032 on 12 Jul 2016

@liu7923032 list4默认值是什么？

airyland picture airyland on 12 Jul 2016

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

liu7923032 picture liu7923032 on 12 Jul 2016

默认value是什么

airyland picture airyland on 12 Jul 2016

@airyland 默认是空数组 []

liu7923032 picture liu7923032 on 12 Jul 2016

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

liu7923032 picture liu7923032 on 12 Jul 2016
👍3

引用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"中有问题吗？

kevinlvhsl picture kevinlvhsl on 13 Jul 2016

@kevinlvhsl 我也遇到这个问题

Baiang picture Baiang on 19 Jul 2016

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

kevinlvhsl picture kevinlvhsl on 1 Aug 2016

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

nigelvon picture nigelvon on 2 Aug 2016

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

airyland picture airyland on 6 Aug 2016

我这样解决，有点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('--', '')
}

taurusser picture taurusser on 16 Jan 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

prettybot picture prettybot  ·  3Comments
iqiuye picture iqiuye  ·  4Comments
lkangd picture lkangd  ·  5Comments
hao-li picture hao-li  ·  3Comments
hjmmc picture hjmmc  ·  3Comments