如何在Vue.JS中将数组放入多选中

Posted 2023-02-23

【中文标题】如何在Vue.JS中将数组放入多选中

【英文标题】：How to put array in multiple select in Vue.JS

【发布时间】：2020-07-20 08:13:37

【问题描述】：

我尝试将对象数组放入多选中仅几个小时 我从 axios 请求中得到了这个数组，接下来我需要显示整个数组以及这个数组中的所有标题对象 如果有人知道如何解决这个问题，那就太好了，我很感激 这是我的数组

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 商店的代码

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】：

异步/等待修复：

  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>

当您这样做时，整个选定的产品将保存在产品数据属性中。