Dynamic v-model for checkboxes with nested arrays (vue 2)

Get Help
#1

Hi! I’m not getting how checkboxes should be handled with v-model dynamically. I have to define the object as a local array for them to bind correctly.

I won’t know how many entries I’ll receive, so the goal is to create a nested array for each set of checkboxes.

Here’s a link to a sandbox showing the problem: vue-checkbox-problem - CodeSandbox

Here’s the same code:

<template>
  <div id="app">
    {{ filter }}
    <div v-for="item in list" :key="Object.keys(item)[0]">
      <h2>{{ Object.keys(item)[0] }}</h2>
      <div v-for="option in Object.values(item)[0]" :key="option._id">
        <input
          @change="log"
          type="checkbox"
          name=""
          :id="option.name"
          :value="option.name"
          v-model="filter[Object.keys(item)[0]]"
        />
        {{ option.name }} ({{ Object.keys(item)[0] }})
      </div>
    </div>
  </div>
</template>

<script>
const api_response = require("@/assets/dummy-data.json");

export default {
  name: "App",
  components: {},
  data() {
    return {
      list: api_response,
      filter: {
        list_one: [],
      },
    };
  },
  methods: {
    log() {
      console.log("log", this.filter);
    },
  },
  mounted() {
    console.log(this.list, Object.entries(this.list));
  },
};
</script>

<style>
#app {
}
</style>

dummy-data.json:

[
  {
    "list_one": [
      {
        "_id": "62da46072b8ad1f9dcb8733b",
        "name": "Miller Brennan"
      },
      {
        "_id": "62da460771b37c9f7f942011",
        "name": "Moses Houston"
      },
      {
        "_id": "62da460739d2512479611349",
        "name": "Ware Cox"
      }
    ]
  },
  {
    "list_two": [
      {
        "_id": "62da46477af2976444c052a0",
        "name": "Simmons Montgomery"
      },
      {
        "_id": "62da4647120f84ffda17785f",
        "name": "Barrera Pickett"
      },
      {
        "_id": "62da464771d327f305eadb09",
        "name": "Sheryl Frost"
      }
    ]
  }
]
#2

Seems to be working if I loop through list and set empty values. Though this strikes me as unnecessary verbose solution. Any input would be appreciated.

    for (const a of this.list) {
      this.filter = {
        ...this.filter,
        [Object.keys(a)[0]]: [],
      };
    }
#3

My best advice is to structure your data (model) better. With a good structured model, the rest of the code becomes much easier to write. In your case, the data should rather be structured like this:

[
  {
    "name": "list_one",
    "items": [
      {
        "_id": "62da46072b8ad1f9dcb8733b",
        "name": "Miller Brennan"
      },
      {
        "_id": "62da460771b37c9f7f942011",
        "name": "Moses Houston"
      },
      {
        "_id": "62da460739d2512479611349",
        "name": "Ware Cox"
      }
    ]
  },
  {
    "name": "list_two",
    "items": [
      {
        "_id": "62da46477af2976444c052a0",
        "name": "Simmons Montgomery"
      },
      {
        "_id": "62da4647120f84ffda17785f",
        "name": "Barrera Pickett"
      },
      {
        "_id": "62da464771d327f305eadb09",
        "name": "Sheryl Frost"
      }
    ]
  }
]
#4

Thank you for the input! I actually re-structured the data and ended up clearing the bug from that. Not really sure where in the chain it went wrong, but I’ll take your advice with me.

Cheers!