uview——switch开关 列表修改状态

介绍

网址：https://www.uviewui.com/components/switch.html
在渲染的列表中使用

案例演示

代码

<view class="item" v-for="(item,index) in list" :key="index">
	<view class="switchBox">
		<u-switch v-model="item.status == 0 ? false : true" :activeValue="true" :inactiveValue="false"
			asyncChange @change="asyncChange(item)" inactiveColor="#BFBFBF" activeColor="#62C0AD">
		</u-switch>
	</view>
</view>

export default {
    
    
	data() {
    
    
		return {
    
    
			//0禁用、1开启
			list: [
				{
    
    name："内容1",status:0},
				{
    
    name："内容2",status:1},
				{
    
    name："内容3",status:0},
			]
		}
	},
	methods: {
    
    
		asyncChange(item) {
    
    
			console.log(item);
			uni.showModal({
    
    
				title: '提示',
				content: `你确定要${
      
      item.status == 0?'开启':'禁用'}吗`,
				confirmColor: '#63C0AD',
				success: (res) => {
    
    
					if (res.confirm) {
    
    
						// 调用状态修改接口
						this.$common.request('post', '/agent/index/saveDistributorsStatus', {
    
    
							id: item.id,
						}).then(res => {
    
    
							console.log(res);
							if (res.code = 1) {
    
    
								this.$common.success(res.msg)
								this.getList()
							}
						})
					}
				}
			})
		},
	}
}