[Vuejs]-Table data rendering

by

0👍

Use an array instead with all your data and rows, you can then use v-model to capture the selection.

Sample data:

  data: [
    {
      label: "Himalayan Salajit (Pakistan Only)*",
      amount: 800,
      options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      selectedOption: null,
    },
    {
      label: "Something",
      amount: 200,
      options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      selectedOption: null,
    },
    {
      label: "Something Else",
      amount: 100,
      options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      selectedOption: null,
    },
  ]

Then you can use this data and loop it in your template. As you only want the label and the selected option you can just filter out the other values that you don’t want (sample in the codesandbox below).

So your template would now look like:

<table>
  <tr v-for="(dat, i) in data" :key="i">
    <th>{{ dat.label }}</th>
    <td>{{ dat.amount }}</td>
    <td class="text-center">
      <select v-model="dat.selectedOption">
        <option v-for="(opt, i) in dat.options" :key="i">{{ opt }}</option>
      </select>
    </td>
    <td class="text-right">PKR 0.00</td>
  </tr>
</table>

where we loop through the array and show the data we want.

DEMO for reference

Leave a comment