2022-12-29

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