1、代码部分
<template>
<view class="content">
<input type="text" value="" placeholder-style="color:#999;font-size:14px; letter-spacing: 2px;" v-model="id"/>
<picker @change="sortChange" :value="id" :range="diaryList" :range-key="'title'" class="form_flex">
<view class="uni-input">{{diaryList[id].title}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
diaryList:[],
id: 0,
param:[]
};
},
//开始的加载数据（用于加载项目分类）
onLoad() {
this.loadData()
},
methods: {
loadData: function() {
this.param = {
url: 'sort/getSortlist'
};
this.$xuehu.request(this.param).then(res=>{
this.diaryList = res.data.data;
})
},
change(e) {
console.log("e:", e);
},
//picker
sortChange(e) {
this.data.id = this.id = e.target.value
console.log('picker选择改变，携带值为', e.target.value)
},
}
}
</script>
2、接口数据部分
http://192.168.1.21/api/sort/getSortlist
image.png
3、下拉选择后，绑定的数据是与接口拿到的id值不一致
image.png
