There mpvue framework and with native micro-channel applet certain differences, before the time how do selector will not work with the native method, and finally found a solution.
Data array, as follows:
<template>
<div class="cost-estimation">
<view class="section">
<picker mode="selector" @change="bindPickerChange" :index="index" :range="array">
<view>
States currently selected: {{array [index]}}
</view>
</picker>
</view>
</div>
</template>
<script>
export default {
data () {
return {
array: [ 'China', 'America', 'Japan', 'Korea'],
index: 0
}
},
methods: {
bindPickerChange: function (e) {
console.log ( 'picker change transmission selected, carrying a value', e)
this.index = e.mp.detail.value
}
}
}
</script>
Data object to an array, as follows:
<template>
<div class="cost-estimation">
<view class="section">
<picker mode="selector"
@change="bindPickerChange" :index="index" :range="objectarray" :range-key="
'name'">
<view>
States currently selected: {{objectarray [index] .name}}
</view>
</picker>
</view>
</div>
</template>
<script>
export default {
data () {
return {
objectarray: [
{
id: 1,
name: 'Chinese'
},
{
id: 1,
name: 'American'
},
{
id: 1,
name: 'Japan'
},
{
id: 1,
name: 'Korea'
}
],
index: 0
}
},
methods: {
bindPickerChange: function (e) {
this.index = e.mp.detail.value
}
}
}
</script>
Note: 1, in mpvue the template is not part of bindchange nor @click
2, is an array of data objects, range-key corresponding to the 'name' in quotes