vuejs data not reactive

Question

I have a data which is an object inside an object like {"1": {}} and it is not reactive in the <template>.. Below is my code

<template>
  <div>
      <b-container
        class="bg-white text-center scrollBehavior"
      >
        <b-row
          class="align-items-center selection-row"
          v-for="(category, categoryIndex) in defaultSelectionCategories"
          :key="categoryIndex"
        >
          <b-col cols="1" class="pl-1 pr-1">
            {{ category }}
          </b-col>
          <b-col class="bg-white pt-2">
            <b-container class="pl-1 pr-1">
              <b-row class="mb-2" v-for="row in 3" :key="row">
                <b-col
                  class="pl-1 pr-1"
                  variant="outline-light"
                  v-for="(selection, selectionIndex) in _.cloneDeep(
                    defaultSelection
                  ).splice(
                    (row - 1) * 5,
                    row === 3 ? (categoryIndex + 1 > 5 ? 4 : 6) : 5
                  )"
                  :key="selectionIndex"
                >
                  <b-button
                    block
                    size="sm"
                    variant="outline-light"
                    :class="[
                      'selection',
                      requestSelection['1']['0'] ? 'active' : ''
                    ]"
                    @click="calculateRequest(categoryIndex + 1, selection)"
                  >
                    {{ selection }}
                  </b-button>
                </b-col>
              </b-row>
            </b-container>
          </b-col>
        </b-row>
      </b-container>
  </div>
</template>

<script>
var hmItems = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var dxItems = ["a", "b"];
var dsItems = ["c", "d"];
var lhItems = ["e", "f"];

var selection = [...hmItems, ...dxItems, ...dsItems, ...lhItems];

var selectionCategories = [
  "aa",
  "bb",
  "cc",
  "dd",
  "ee",
  "ff",
  "gg",
  "hh",
  "ii",
  "jj"
];

var requestSelection = {
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
  6: {},
  7: {},
  8: {},
  9: {},
  10: {}
};

export default {
  data: function() {
    return {
      defaultSelection: this._.cloneDeep(selection),
      defaultSelectionCategories: this._.cloneDeep(
        selectionCategories
      ),
      defaultSelection: this._.cloneDeep(requestSelection),
      requestSelection: this._.cloneDeep(requestSelection)
    };
  }
  methods: {
    calculateRequest(categoryIndex, selection) {
      console.log("Start Calculate Request");
      console.log("CategoryIndex: " + categoryIndex);
      console.log("Selection: " + selection);
      if (hmItems.indexOf(selection) !== -1) {
        if (
          !this.requestSelection[categoryIndex]["0"] ||
          !this.requestSelection[categoryIndex]["0"].length
        ) {
          this.requestSelection[categoryIndex]["0"] = [selection];
        } else {
          const indexOf = this.requestSelection[categoryIndex]["0"].indexOf(
            selection
          );
          if (indexOf === -1) {
            this.requestSelection[categoryIndex]["0"].push(selection);
          } else {
            this.requestSelection[categoryIndex]["0"].splice(indexOf, 1);
          }
        }
      } else if (dxItems.indexOf(selection) !== -1) {
        this.requestSelection[categoryIndex]["1"] = selection;
      } else if (dsItems.indexOf(selection) !== -1) {
        this.requestSelection[categoryIndex]["2"] = selection;
      } else if (lhItems.indexOf(selection) !== -1) {
        this.requestSelection[categoryIndex]["3"] = selection;
      }
      console.log(
        "this.requestSelection: " + JSON.stringify(this.requestSelection)
      );
    },
  }
};
</script>

My class on <b-button> is suppose to have an active class when I click that button but it does not update. The data surely updated as it shows in console.log("this.requestSelection: " + JSON.stringify(this.requestSelection)); but still nothing happens. Funny that if I put {1: { "0": ["1"] }, ...} instead of {1: {}},.. it will work properly.

What am I missing here?

Answer 1

I think I just found the answer:

this.$set(this.requestSelection[categoryIndex], "0", [selection]); instead of this.requestSelection[categoryIndex]["0"] = [selection];