Table data rendering

Question

I want to get the titles of 'th' and 'td' when I press the save button to store on a variable using vue

my HTML code

                        <tr>
                            <th>Himalayan Salajit (Pakistan Only)*</th>
                            <td>PKR 800</td>
                            <td class="text-center">
                                <select class="form-control form-control-inline">
                                    <option>0</option>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                    <option>7</option>
                                    <option>8</option>
                                    <option>9</option>
                                    <option>10</option>
                                </select>
                            </td>
                            <td class="text-right">PKR 0.00</td>
                        </tr>

Does this answer your question? [How to get a table cell value using jQuery?](https://stackoverflow.com/questions/376081/how-to-get-a-table-cell-value-using-jquery) — Oscar Schafer, Apr 25 '21 at 09:30

score 0 · Answer 1 · answered Apr 25 '21 at 17:42

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

Table data rendering

1 Answers1