Как поместить массив в множественный выбор в Vue. JS - PullRequest
0 голосов
/ 08 апреля 2020

Всего несколько часов, я пытаюсь поместить массив объектов в множественный выбор. Я получил этот массив из запроса ax ios, и затем мне нужно отобразить весь массив со всеми титровальными объектами в этом массиве. Если у кого-то есть информация, как решить эту проблему будет приятно и благодарно это мой массив

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",…}

это мой код из 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)
            })
    })
},

1 Ответ

1 голос
/ 09 апреля 2020

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

В КОМПОНЕНТЕ:

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

При этом весь выбранный продукт будет сохранен в свойстве данных продукта.

...