How do I edit values on multiple rows and columns on a table with vue.js

[Ifriqiya]

I need help with this question I asked on SO: https://stackoverflow.com/questions/76038793/how-do-i-edit-values-on-multiple-rows-and-columns-on-a-table-with-vue-js.

[chenxch]

Because all your rows are bound to a certain field in the form.equitySecurities object, of course, all of them will change together once you update them.

[Ifriqiya]

Yes, that's precisely what I need help with. What is the correct way to go about this? How do I get form.equitySecurities to use the key-equitySecurity.id to distinguish between rows? I was thinking doing this v-model="form.equitySecurities[equitySecurity.id].weight"
would work but it didn't.

[chenxch]

why not?
demo

[Ifriqiya]

Thanks for your demo. I'm testing why this isn't working for me when it should so that I can resolve it or narrow down the problem further. I'll get back after that.

[Ifriqiya]

Doing this

<tbody>
              <tr
              v-for="equitySecurity in equitySecurities"
              :key="equitySecurity.id"
              class="dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-300 focus-within:bg-blue-100"
            >
              <input
                type="hidden" v-model="form.equitySecurities[equitySecurity.id].id"
              />
              <td class="border-2 p-2">
                {{ equitySecurity.name }}
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities[equitySecurity.id].weight"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities[equitySecurity.id].tracking_status"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities[equitySecurity.id].security_rating"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities[equitySecurity.id].target_entry_price"
                />
              </td>
              <td class="border-2 p-2">
                <input
                  type="text" v-model="form.equitySecurities[equitySecurity.id].target_exit_price"
                />
              </td>
            </tr>
            <tr v-if="equitySecurities.length === 0">
              <td class="border-2 p-2" colspan="4">No Equity Security found.</td>
            </tr>
            </tbody>

produced an Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id') at the very first input element.

[Ifriqiya]

Doing v-for="(equitySecurity, index) in equitySecurities" and doing v-model="form.equitySecurities[index].weight" worked.

[chenxch]

Congratulations, but I think you should provide a rough data structure when you ask a question next time, so that others can help you locate the problem faster.

[Ifriqiya]

Thanks. What would be a rough data structure in this case so I can understand what to provide?