What is the method to implement foreach within a Vue select component?

Question

What is the method to implement foreach within a Vue select component?

Is there a way to utilize a Vue loop within a select box in order to achieve the following category and subcategory options layout:

+news
-sport
-international
+blog

In PHP, I can accomplish this like so:

@foreach($categories as $category)
    <option value="{{$category->id}}">{{$category->name}}</option>
    @foreach($category->subcategory as $sub)
        <option value="{{$sub->id}}">-{{$sub->name}}</option>
    @endforeach 
@endforeach

** My goal is to implement this functionality in a Vue component **

javascript php laravel vue.js

Answer 1

Answer №1

Creating a nested selector in vuejs is a fairly simple process.

// To start, initialize the Vue instance
var app = new Vue({
  el: '#app',
  // Set up the data, for example if you are using Laravel and Blade, 
  //you will need to retrieve all the categories like:
  // data: {{ Category::with(['subcategories'])->get() }}
  data: {
    categorySelected: null,
    subcategorySelected: null,
    message: 'Hello Vue!',
    categories: [
      {
        name: 'news',
        subcategories: [
          {
            name: 'sport'
          },
          {
            name: 'international'
          }
        ]
      },
      {
        name: 'blog',
        subcategories: [
          {
            name: 'a blog subcategory example'
          },
          {
            name: 'another blog subcategory example'
          }
        ]
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <label>Category Selected: {{ categorySelected ? categorySelected.name : null }}</label> <br>
  <label>Subcategory Selected: {{ subcategorySelected ? subcategorySelected.name : null }}</label> <br>
  <select v-model="categorySelected">
     <optgroup v-for="category in categories" :label="category.name">  
      <option
        v-for="subcategory in category.subcategories"
        :value="subcategory"
      >
        {{subcategory.name}}
      </option>
    </optgroup>
  </select>
<div>

Answer 2

Creating a nested selector in vuejs is a fairly simple process.

// To start, initialize the Vue instance
var app = new Vue({
  el: '#app',
  // Set up the data, for example if you are using Laravel and Blade, 
  //you will need to retrieve all the categories like:
  // data: {{ Category::with(['subcategories'])->get() }}
  data: {
    categorySelected: null,
    subcategorySelected: null,
    message: 'Hello Vue!',
    categories: [
      {
        name: 'news',
        subcategories: [
          {
            name: 'sport'
          },
          {
            name: 'international'
          }
        ]
      },
      {
        name: 'blog',
        subcategories: [
          {
            name: 'a blog subcategory example'
          },
          {
            name: 'another blog subcategory example'
          }
        ]
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <label>Category Selected: {{ categorySelected ? categorySelected.name : null }}</label> <br>
  <label>Subcategory Selected: {{ subcategorySelected ? subcategorySelected.name : null }}</label> <br>
  <select v-model="categorySelected">
     <optgroup v-for="category in categories" :label="category.name">  
      <option
        v-for="subcategory in category.subcategories"
        :value="subcategory"
      >
        {{subcategory.name}}
      </option>
    </optgroup>
  </select>
<div>

Answer 3

Answer №2

Give this a shot. JS:

const vueModel = new Vue({
    el: "#app",
    data: {
        collection: [{
            id: 1,
            label: 'primary',
            items: [{id: 1, name: 'one'}, {id: 3, name: 'three'}]
        }, {
            id: 2,
            label: 'secondary',
            items: [{id: 2, name: 'two'}, {id: 4, name: 'four'}]
        }],
    },
});

HTML:

<option v-for="element in collection" :value="element.id" v-text="element.label"></option>
    <option v-for="numItem in element.items" :value="numItem.id" v-text="numItem.name"></option>

Answer 4

Give this a shot. JS:

const vueModel = new Vue({
    el: "#app",
    data: {
        collection: [{
            id: 1,
            label: 'primary',
            items: [{id: 1, name: 'one'}, {id: 3, name: 'three'}]
        }, {
            id: 2,
            label: 'secondary',
            items: [{id: 2, name: 'two'}, {id: 4, name: 'four'}]
        }],
    },
});

HTML:

<option v-for="element in collection" :value="element.id" v-text="element.label"></option>
    <option v-for="numItem in element.items" :value="numItem.id" v-text="numItem.name"></option>

What is the method to implement foreach within a Vue select component?

Answer №1

Answer №2

Similar questions

Invoking a JavaScript class using a script tag

Several components utilizing a popup module

Retrieve files from Amazon S3 using JavaScript

Ways to detect the use of vue.js on a webpage without relying on vue-devtools

What is the best way to align a <div> element below another without being on the same line?

How to filter jQuery DataTables by column using comparison operators

JavaScript code for downloading data through AJAX and then loading a chart is not functioning as expected

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

Using jQuery Datepicker Beforeshowday to dynamically retrieve an array of unavailable dates through Ajax

Retrieve information from a web service using PHP function

The functionality of linear mode seems to be malfunctioning when using separate components in the mat-horizontal-stepper

Generating a tree structure using a JavaScript array

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

The function WebForm_DoCallback is not recognized

Using .htaccess to Handle Empty $_POST Requests

Exploring the Positives and Negatives of Using JQuery and Glow JavaScript Libraries

How to utilize 'this' in a Vue template?

The AngularJs 2 framework encountered an issue with booting up after attempting to combine all TypeScript files into a single JavaScript file

enhancing look of external tool