CODEWITHSUNDEEP
vue.jsvuejs2axiosvue-componentvuex
Евгений Тимченко
Евгений Тимченко

Reputation: 183

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

Upvotes: 0

Views: 238

Answers (1)

Despertaweb
Despertaweb

Reputation: 1820

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.

Upvotes: 1

Related Questions