vue3如何把Proxy中的数组中对象拿出来使用

Question

我想要把 @click="updateid"这个点击事件，调用saveOrUpdateApi这个接口，把当前点击的goodsId传递到这个接口里面，这里的goodsId怎么赋值

以下是打印的Proxy的数据，想取里面的goodsId赋值给上面的接口里

<template>
    <view class="u-wrap">
        <view class="u-menu-wrap">
            <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
                <view
                    v-for="(item, index) in tabbar"
                    :key="index"
                    class="u-tab-item"
                    :class="[current == index ? 'u-tab-item-active' : '']"
                    :data-current="index"
                    @tap.stop="swichMenu(index)"
                >
                    <text class="u-line-1">{{ item.categoryName }}</text>
                </view>
            </scroll-view>
            <block v-for="(item, index) in tabbar" :key="index">
                <scroll-view scroll-y class="right-box" v-if="current == index">
                    <view class="page-view">
                        <view class="class-item">
                            <view class="item-container">
                                <view class="thumb-box" @click="updateid" v-for="(item1, index1) in item.goods" :key="index1">
                                    <view class="item-menu-name">
                                        <span>{{ item1.goodsName }}</span>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </block>
        </view>
    </view>
</template>

<script setup>
import { getCategoryListApi } from '../../api/index.js';
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 获取组件实例
const instance = getCurrentInstance();
const tabbar = ref([]);
const scrollTop = ref(0);
const current = ref(0);
const menuHeight = ref(0);
const menuItemHeight = ref(0);
const getImg = () => {
    return Math.floor(Math.random() * 35);
};
const swichMenu = async (index) => {
    if (index == current.value) return;
    current.value = index;
    // 如果为0，意味着尚未初始化
    if (menuHeight.value == 0 || menuItemHeight.value == 0) {
        await getElRect('menu-scroll-view', 'menuHeight');
        await getElRect('u-tab-item', 'menuItemHeight');
    }
    // 将菜单菜单活动item垂直居中
    scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
};
const getElRect = (elClass, dataVal) => {
    new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(instance);
        query
            .select('.' + elClass)
            .fields({ size: true }, (res) => {
                // 如果节点尚未生成，res值为null，循环调用执行
                if (!res) {
                    setTimeout(() => {
                        getElRect(elClass);
                    }, 10);
                    return;
                }
                instance[dataVal] = res.height;
            })
            .exec();
    });
};
//跳转详情
const toDetails = (item) => {
    console.log(item);
    //在起始页面跳转到details.vue页面并传递参数
    uni.navigateTo({
        url: '../detail/detail?goods=' + JSON.stringify(item)
    });
};
//获取分类数据
const getCategoryList = async () => {
    let res = await getCategoryListApi();
    if (res && res.code == 200) {
        tabbar.value = res.data;
        console.log(tabbar.value)
    }
};
//引入更新科目api
import { saveOrUpdateApi } from '../../api/user.js';
const updateid = async () => {
    let res = await saveOrUpdateApi({
         goodsId:
    });
};
onLoad(() => {
    getCategoryList();
});
</script>

Answer 1

🕝凌晨好，题主！目前：🔴[离线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：我心匪石，不可转也。

首先，你需要在模板中为<view class="thumb-box" @click="updateid">的goodsId属性添加一个绑定，这样你就可以在updateid方法中直接访问到它。修改后的模板如下：

<template>
    ...
    <view class="thumb-box" @click="updateid(item1)" :data-goods-id="item1.goodsId">
        ...
    </view>
    ...
</template>

然后，在updateid方法中，你可以通过event.target.dataset.goodsId来获取到goodsId的值，event是事件对象，包含了目标元素的信息。修改后的updateid方法如下：

<script setup>
...
const updateid = async (item1) => {
    let goodsId = item1.goodsId; // 直接从事件对象中获取goodsId
    let res = await saveOrUpdateApi({ goodsId });
};
...
</script>

这样，当点击某个thumb-box时，goodsId就会被传递到saveOrUpdateApi接口中了。注意，data-goods-id是一个自定义的属性，你需要确保你的后端API能够接受这个属性的值。如果后端API需要不同的键名，你需要相应地调整代码。