Search code examples
vue.jsvuejs2axiosvue-componentvuex

How to put array in multiple select in Vue.JS


Just few hours im tryin to put array of object in multiple select I got this array from axios request and next im need display whole array with all title objects in this array If someone have info how to solv this probled it will be nice and im gratefull this is my array

products: [{id: 6, category_id: 2, title: "Тест", brand: "Тест", serial_number: "2165412315864",…},…]

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

1: {id: 7, category_id: 3, title: "Test2", brand: "Test2", serial_number: "2165412315864",…}

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

this is my code from Vuex Store

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)
            })
    })
},

Solution

  • ASYNC/AWAIT FIX:

      async getOrders(ctx, data) {
            try {
               const { data } = await axios({
                url: '/orders',
                data: data,
                method: 'GET'
              })
    
          ctx.commit('setOrders', data.orders)
          ctx.commit('setUsers', data.users)
          ctx.commit('setProducts', data.products)
          ctx.commit('updatePagination', data.pagination)
        } catch (e) {
          console.error(e)
        }
      }
    

    IN COMPONENT:

      <select v-model="product">
        <option v-for="product in products" :key="product.code" :value="product">
          {{ product.title }}
        </option>
      </select>
    

    When you do this way, the whole selected product would be saved in the product data property.