Pass object with v-model or only the index

[Nisgrak]

Hi!

I have the state of the app in pinia similar to this:

{
  "sections": [
    {
      "instruments": [
        {
          "notes": [0, 1, 5, 2]
        }
      ]
    }
  ]
}

Each section is a component, that have 1 children for each instrument, that have 1 children for each note (it's a musical app)

Actually I'm passing the model-value and using the @update event with a complex function to adapt the object, would be a better approach to pass the indexSection, indexInstrument and indexNote and read/write directly to the store by each children?

The v-model way works, but looks a bit messy.

What do you think?

[posva]

Using v-model would be more idiomatic and flexible (from a component perspective):

<MyNote v-model:note="store.sections[sectionIndex].instrument[instrumentIndex].notes[noteIndex]" />

Depending on the other things you are doing, you might have a getter that returns the currently selected section / instrument, so the code above becomes

<MyNote v-for="(note, i) in currentInstrument.notes v-model:note="currentInstrument.notes[i]" />