微信小程序 mpvue + picker
用mpvue框架和原生的微信小程序有一定差异性，之前在做选择器的时候用原生的方法怎么都不行，最后找到了解决办法。
数据为数组，代码如下：
<template>
<div class="cost-estimation">
<view class="section">
<picker mode="selector" @change="bindPickerChange" :index="index" :range="array">
<view>
当前选择的国家：{{array[index]}}
</view>
</picker>
</view>
</div>
</template>
<script>
export default {
data () {
return {
array: ['中国', '美国', '日本', '韩国'],
index: 0
}
},
methods: {
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e)
this.index = e.mp.detail.value
}
}
}
</script>
数据为数组对象，代码如下：
<template>
<div class="cost-estimation">
<view class="section">
<picker mode="selector" @change="bindPickerChange" :index="index" :range="objectarray" :range-key="'name'">
<view>
当前选择的国家：{{objectarray[index].name}}
</view>
</picker>
</view>
</div>
</template>
<script>
export default {
data () {
return {
objectarray: [
{
id: 1,
name: '中国'
},
{
id: 1,
name: '美国'
},
{
id: 1,
name: '日本'
},
{
id: 1,
name: '韩国'
}
],
index: 0
}
},
methods: {
bindPickerChange: function (e) {
this.index = e.mp.detail.value
}
}
}
</script>
注意： 1、在 mpvue 中 template 部分不是 bindchange 也不是 @click
2、数据为数组对象时，range-key 对应的 'name' 要加引号
