javascript - 使用 vuex 和 vue 的表单组件中可重用的下拉字段

Question

在我的表单组件中，有两个下拉字段。我已经采用这种方法来获取下拉项目。

1. 使用不同的 url 获取不同下拉列表的项目并传递给相同的下拉服务。
2. 使用服务和操作传递 url 和文本/值对以显示表单中每个下拉列表的项目。

这是获取不同下拉字段的不同下拉项的服务

    export async function fetchItemsOfDrowdown(url) {
    const resp = await http.get(url);
    return resp.data;
}

为此的操作和突变（为下拉菜单设置项目文本/值对）

async fetchDropdownItems({ state, commit }, payload) {
    if (!state.fieldItems[payload.key]) {
        const items = await service.fetchItemsOfDrowdown(payload.url);
        const parsedItems = [];
        for (let i = 0; i < items.length; i += 1) {
            const item = items[i];
            parsedItems.push({
                text: item[payload.text],
                value: item[payload.value]
            });
        }
        commit('DropdownFieldItems', {
            key: payload.key,
            items: parsedItems
        });
    }
}

我正在将此操作用于我的表单组件到创建的方法中。（EditFormComponent）

created() {
    if (this.fields && Object.keys(this.fields).length > 0) {
        const fieldKeys = Object.keys(this.fields);
        for (let i = 0; i < fieldKeys.length; i += 1) {
            const key = fieldKeys[i];
            if (this.fields[key] && this.fields[key].uri) {
                this.fetchDropdownItems({
                    key,
                    url: this.fields[key].uri,
                    text: 'value',
                    value: 'id'
                });
            }
        }
    }
},

这些是下拉字段的类型（EditFromComponent）

data: () => ({
   fields : {
    category_id: {
        key: 'category_id',
        label: 'Category',
        uri: '/products/category',
        value: '',
        items: []
    },
    product_size: {
        key: 'product_size',
        label: 'Available Size',
        value: '',
        uri: '/products/${item_id}/category/${category_id}
        items: []
    }
   }
});

这两个 uri 给出了两个响应有效载荷，如下所示

1. categories : [{"id": 1, "value":"Shoe"},{"id": 2, "value":"Clothing"}]
2. product size : [{ "category_name": "Shoe", sizes: ['7','8','9'] }] 

这种方法工作正常，但由于有效载荷的结构（不在 id /value 对中），产品尺寸下拉列表未显示

如何解决这个问题？

标签： javascriptvue.jsvuex