VueJs 3 checkbox v-model on array of objects not working properly

Question

I am having a hard time understanding why my v-model isn't working correctly I have an 'service' object which contains a property 'actions' of type IAction[] I also declared an object actions which is an array of IAction and am currently trying to bind checkBoxes to the actions array, but it is not working.

I feel like i am missing something obvious here but would need a little help understanding what it is.

Here is the relevant code

<script lang="ts">
  let actions = [] as IAction[];
</script>

<template>
  <div v-for="action in service.Actions" :key="action.Id" class="row">
   <div class="col-md-12 d-flex">
    <div>
      <span class="pe-3">
        {{ action.EnumName }}
      </span>
      <input v-model="actions" :value="action" type="checkbox" />
    </div>
   </div>
  </div>
</template>

I would appreciate any feedback as I am relatively new to VueJs, Thank you

Answer 1

I think you might not understand what you are doing in code, so I wrote examples.

Bad Code:

<script lang="ts">
  let actions = [] as IAction[];
</script>

<template>
  // here you iterate thro array and assign to action variable
  <div v-for="action in service.Actions" :key="action.Id" class="row">
   <div class="col-md-12 d-flex">
    <div>
      <span class="pe-3">
        {{ action.EnumName }}
      </span>
      // Here you using actions with "s" on end so you using empty array declered in script
      <input v-model="actions" :value="action" type="checkbox" />
    </div>
   </div>
  </div>
</template>

If you are getting some data from service.Actions use them! v-model will override those actions if they are ref() or `reactive().

Example:

<script lang="ts">
  let actions = [] as IAction[];
</script>

<template>
  <div v-for="item in service.Actions" :key="action.Id" class="row">
   <div class="col-md-12 d-flex">
    <div>
      <span class="pe-3">
        {{ item.EnumName }}
      </span>
      <input v-model="item.is" :value="action" type="checkbox" />
    </div>
   </div>
  </div>
</template>

If service.Actions is only array actions you want to add to array in script actions v-model is not a way you do that!

Probably code you need:

<script lang="ts">
  const actions = ref([])  // Use refs everywhere !!! A specially in forms.

function deleteItem() {
  // ToDo delete item from actions array
}
</script>

<template>
  <div v-for="item in service.Actions" :key="item.Id" class="row">
   <div class="col-md-12 d-flex">
    <div>
      <span class="pe-3">
        {{ item.EnumName }}
      </span>
      <button @click="actions = [...actions, item]">ADD</button>
    </div>
   </div>
  </div>
  <div>
    <div v-for="{ item, index } in actions" :key="item.id">
      <span>{{ item.EnumName }}</span><button @click="deleteItem(index)">X</button>
    </div>
  </div>
</template>