Form with array - problem with select options

Published 1 week ago by mlutz

Hello, i need a form to edit some data. From the Api I receive the following data

[{"id":1,"firstname":"Emma","lastname":"Gomez","tdate":"2018-03-03","visit":"X"},{"id":2,"firstname":"Jacob","lastname":"Miller","tdate":"2018-03-03","visit":"D"}...

I would like to list the data and change the visit-state.

 <ul v-if="players">
            <li v-for="{ id, firstname, lastname } in players">
            {{ firstname }} {{ lastname }} 
                <select>
                <option value="X">Present</option>
                <option value="E">Excuse</option>
                <option value="D">Diseased</option>
                </select>
          </li>
        </ul>

My first problem: How can i list the received data? The players are displayed. But the old Value is not selected and in the second step i want to save the changes to the api. Thanks for help.

Best Answer (As Selected By mlutz)
tykus

Why are you destructuring the player objects?

 <ul v-if="players">
  <li v-for="player in players">
    {{ player.firstname }} {{ player.lastname }} 
    <select v-model="player.visit">
      <option value="X">Present</option>
      <option value="E">Excuse</option>
      <option value="D">Diseased</option>
    </select>
  </li>
</ul>
tykus
tykus
1 week ago (620,710 XP)

Why are you destructuring the player objects?

 <ul v-if="players">
  <li v-for="player in players">
    {{ player.firstname }} {{ player.lastname }} 
    <select v-model="player.visit">
      <option value="X">Present</option>
      <option value="E">Excuse</option>
      <option value="D">Diseased</option>
    </select>
  </li>
</ul>
mlutz
mlutz
1 week ago (9,900 XP)

@tykus Thanks for your reply. If i change one player, the other players are changed as well.

This is all new territory for me. Hope you can help me.

Update: Damn it. I forgot to start npm or rather elexir. All at once it works.

Many thanks.

Please sign in or create an account to participate in this conversation.