15. Using a v-for with a select dropdown list

This is similar to last example except now all the options values are in a data list which is bound to the value atrribute after iterating over options using a v-for.

This is the App.vue file:

<template>
  <div>
    <fieldset>
      <legend>Color used:</legend>
      <select v-model="col">
        <option v-for="c in cols" :value="c">{{c}}</option>
      </select>
    </fieldset>
    <h2>Color:</h2>
    <h2>{{col}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      col: "Red",
      cols: ["Red","Green","Blue"]
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

The output is same as the previous Example.