uni-rate评分组件如何获取key和value值

        首先我们找到官方文档uni-app官网，基本用法如下：

<uni-rate v-model="value" @change="onChange"/>

        需要在 script 中绑定 value 变量。

export default {
	components: {},
	data() {
		return {
			value: 2
		}
	},
	methods: {
		onChange(e) {
			console.log('rate发生改变:' + JSON.stringify(e))
		}
	}
}

        这个时候我们发现change事件返回的是一个object类型。

        问题来了，如果我们有多个评分组件，通过v-for来循环执行，那么我们还能拿到key和value值吗？

        接下来我们实现一个功能，通过v-for循环出三个评分组件，当其中有任意一个评分低于2分时，显示隐藏的评价框，用户需要在评价框里面输入评价内容后才能提交表单。

<template>
  <view>
	<view v-for="item in list" :key="item.name" >
		<view>{{ item.name }}</view>
		<uni-rate v-model="item.value" :is-fill="false" @change="onChange(item)"/>
	</view>
	<view v-show="myList && myList.length">
		我是评价框
	</view>
  </view>
</template>

<script>
  export default {
	  data() {
		return {
			myList:[],
			list: [
				{
					name:'骑手评价',
					value: 0,
				},
				{
					name:'商家评价',
					value: 0,
				},
				{
					name:'平台评价',
					value: 0,
				},
			]
		}
	  },
	methods: {
		onChange(item) {
			this.myList = this.list.filter(item => item.value <= 2);
		}
	}
  }
</script>

        我们发现，如果在需要change事件里传入值，不能用value绑定，需要用v-model绑定。

        在 UniApp 中，组件的v-model用于双向绑定数据，而 value通常用于单向绑定数据到视图。

        uni-rate组件设计为只使用v-model 进行数据绑定，而不使用value，这是因为 uni-rate 需要一个可以双向绑定的属性来同步评分的值。

        如果尝试使用 value绑定数据，可能会遇到问题，因为 value更适合只读属性或者不需要修改的属性。