uniapp选择时添加数据到数组取消时删除
可以通过以下方法实现:
- 在data中定义一个数组,用于存储选择的数据:
data: {
selectedItems: []
}
- 在选择数据时,将数据添加到数组中:
onSelectItem(item) {
this.selectedItems.push(item)
}
- 在取消选择时,从数组中删除数据:
onCancelSelect(item) {
const index = this.selectedItems.indexOf(item)
if (index !== -1) {
this.selectedItems.splice(index, 1)
}
}
完整代码示例:
<template>
<view>
<view class="items">
<view class="item" v-for="item in items" :key="item.id">
<view>{{ item.name }}</view>
<button @tap="onSelectItem(item)">选择</button>
<button @tap="onCancelSelect(item)">取消</button>
</view>
</view>
<view class="selected-items">
<view v-for="item in selectedItems" :key="item.id">{{ item.name }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' },
{ id: 3, name: '选项3' },
],
selectedItems: []
}
},
methods: {
onSelectItem(item) {
this.selectedItems.push(item)
},
onCancelSelect(item) {
const index = this.selectedItems.indexOf(item)
if (index !== -1) {
this.selectedItems.splice(index, 1)
}
}
}
}
</script>
``
原文地址: https://www.cveoy.top/t/topic/cFCy 著作权归作者所有。请勿转载和采集!