用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' 要加引號