如何在Vue.js中处理Vuex数组

我是一名新的Web开发人员。我需要帮助来获取数组中所有对象的所有标题。我从axios请求中获得了一系列产品。在下一步中,我需要在Vue组件中处理此数组,并将单个值记录到数据中。接下来,我需要在multiselect的选项中显示此数据值。

这是axios代码:

async getOrders(ctx, data)
{
    return new Promise((resolve, reject) => {
        axios({
            url: '/orders',
            data: data,
            method: 'GET'
        })
            .then((resp) => {
                ctx.commit('setOrders', resp.data.orders)
                ctx.commit('setUsers', resp.data.users)
                ctx.commit('setProducts', resp.data.products)
                ctx.commit('updatePagination', resp.data.pagination)
                resolve(resp)
            })
            .catch((error) => {
                console.log(error)
                reject(error)
            })
    })
},

这是我在Vuex商店中记录的一系列产品

0: {id: 6, category_id: 2, title: "Test", brand: "Тест", serial_number: "2165412315864",…}

1: {id: 7, category_id: 3, title: "Климат", brand: "Климат", serial_number: "2165412315864",…}

2: {id: 8, category_id: 5, title: "New", brand: "New", serial_number: "2165412315864",…}

这是我处理该数组的代码

computed:{
        ...mapGetters('order', ['users', 'products',  'orders']),
    },
    methods:{
        getProducts(products)
        {

            const arr = products.map(c => c.title)
            console.log('titles: ', arr); //Debug
            this.options = arr
        }

    },

这是多选的代码

<multiselect v-model="formData.product" :options="options" :value="values" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
                                            <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
                                        </multiselect>



mounted() {
        this.getProducts();
    },
评论
  • G小调
    G小调 回复

    It looks like you're not sending your args by calling just this.getProducts(). You don't need to, just write this. in front of the computed value inside the method.

    methods: {
        getProducts () {
            const arr = this.products.map(c => c.title)
            this.options = arr
        }
    }