微信小程序 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' 要加引号