Блог

У меня есть страница vue, и я пытаюсь создать раскрывающийся список, содержащий все мои продукты, но они сгруппированы по категориям. Я хочу, чтобы выпадающий список выглядел так

   category_1
    Product 1
    Product 4
  category_2
    Product 7
  category_3
    Product 2
  

где «Product #» будет тем, что выбрано и отправлено в мой axios.post().

Вот мой код

   <template>
    <div>
      <div>
          <select v-model="selectedParent">
            <option value="">Please select</option>
            <option v-for="product in products" :value="product.id">{{ product.name }}</option>
          </select>
      </div>
    </div>
  </template>

  <script>
    export default {
        data() {
            return {
                products: []
            }
        },
         methods: {
          getAllProducts(){
            axios.get('/api/products/all_products').then(response => {
              this.products = response.data;
            });
          }
         },
         mounted(){
          this.getAllProducts();
         }
    }
  </script>
  

и когда я console.log(response.data) это то, что я получаю

   category_1: Array(4)
    0:  id : (...)
        name: (...)
    1:  id : (...)
        name: (...)
    2:  id : (...)
        name: (...)
    3:  id : (...)
        name: (...)
  category_2: Array(6)
  category_3: Array(1)
  

Я бы подготовил результат для console.log(response.data) таким образом:

 [
  {
    id: 1,
    name: 'category A',
    products: [
      {id: 1, name: 'product A1'},
      {id: 2, name: 'product A2'}
    ]
  },
  {
    id: 2,
    name: 'category B',
    products: [
      {id: 3, name: 'product B1'},
      {id: 4, name: 'product B2'}
    ]
  }
]
  

И тогда я бы использовал это в шаблоне Vue следующим образом:

 <select v-model="selectedParent">
  <option value="">Please select</option>
  <optgroup v-for="category in products" :label="category.name">
    <option v-for="product in category.products" :value="product.id">{{ product.name }}</option>
  </optgroup>
</select>