[Vuejs]-In Vuejs select list box getting same value for all rows

by

0👍

should works like this:

new Vue({
  el: '#app',
  data: {
    ingredients: [
      { id: 1, item_name: 'foo', quantity: 0, selected: '' },
      { id: 2, item_name: 'bar', quantity: 0, selected: '' },
    ],
     units: ['gms', 'pound', 'kgs']
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
<table>
<tr
  v-for="ingredient in ingredients"
  v-bind:key="ingredient.id"
> 
  <td>
    <input
      type="text"
      class="form-control"
      v-model="ingredient.item_name"
    />
  </td>
  <td>
    <input
      type="number"
      class="form-control"
      v-model="ingredient.quantity"
    />
  </td>
  <td>
  <select v-model="ingredient.selected"> 
        <option v-for="unit in units" v-bind:key="unit" > {{ unit }} </option>
    </select>
  </td>
</tr>
</table>
<pre>{{ ingredients }}</pre>
</div>

Leave a comment