<template>
	<ciy-header title="Vue3 Proxy"></ciy-header>
	<view class="ciy-card">
		<view class="title">Proxy响应式数据</view>
		<view class="content">
			<view>相比Vue2，Vue3更少的考虑$set绑定问题。</view>
			<view class="txt-center py4">
				<button @tap="addstart" class="btn">新增到头部</button>
				<button @tap="addend" class="btn">新增到底部</button>
			</view>
			<view v-for="(item,index) in list" :key="index" style="display: flex;align-items: center;gap: 6px;margin: 16px 0;">
				<button @tap="edit(index)" class="btn def">更新</button>
				<button @tap="del(index)" class="btn def">删除</button>
				<view style="flex:1;">
					{{item.id}}|{{item.name}}|{{item.ext}}|{{item.ext2}}
				</view>
			</view>
		</view>
	</view>
</template>

<style>
</style>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {},
		methods: {
			addstart() {
				var edited = {
					id: 5,
					name: Math.random().toFixed(2),
					ext2: '头部ext2'
				};
				this.list.unshift(edited);
			},
			addend() {
				var edited = {
					id: 5,
					name: Math.random().toFixed(2),
					ext: '底部ext'
				};
				this.list.push(edited);
			},
			edit(index) {
				// this.$set(this.list, index, json.edited);
				this.list[index] = {
					id: 6,
					name: this.lang('tabbar.me') + Math.random().toFixed(2),
					ext2: 'ass'
				};
				console.log(this.list);
			},
			del(index) {
				this.list.splice(index, 1);
			}
		}
	}
</script>