vue js ARRAY push

Question

I have an array(rows) inside an array(tabs). I want to duplicate the the array. now how do I duplicate the rows array and tabs array separately. Like when I click "Add row" button a row will be added and when I click the "add tab" button the whole tab with row will be added. I am trying this way--

export default {
  data() {
    return {
      tabs: [
        {
          selectedHouseType: "",
          rows: [
            {
              decorTypes: {},
              selectedDecor: "",
              selectedDes: "",
              selectedQty: "",
              selectedRate: "",
              line_total: 0,
              descriptions: {},
            },
          ],
        },
      ],
      
    };
  },

  methods: {
     addTab() {
      this.tabs.push({
        selectedHouseType: "",
      });
      this.tabs[this.tabs.length - 1].rows.push({
        selectedDecor: "",
        selectedDes: "",
        selectedQty: "",
        selectedRate: "",
        line_total: 0,
        decorTypes: {},
      });
    },
    addRow() {
      this.tabs[this.tabs.length - 1].rows.push({
        selectedDecor: "",
        selectedDes: "",
        selectedQty: "",
        selectedRate: "",
        line_total: 0,
        decorTypes: {},
      });
    },
}

So how can I do both "add-row" and "add-tab" both separately?

You haven't asked a question. What is the issue? The only thing I can see is you need to add a `rows: []` when pushing inside the `addTab` method: `this.tabs.push({ selectedHouseType: "", rows: [] })`. Otherwise, `rows` will be undefined and `this.tabs[this.tabs.length - 1].rows.push()` will throw an error — adiga, Aug 18 '22 at 06:31
You are already doing it in `addRow` method. Currently you are only pushing it to the last `tab`. But, you could pass the index of the current tab you want. — adiga, Aug 18 '22 at 06:49

lestra · Accepted Answer · 2022-08-18T06:54:32.810

Do you mean something like this?

const App = {
  name: "App",
  template: document.querySelector("#app-template").innerHTML,
  data() {
    return {
      tabs: [
        {
          selectedHouseType: "",
          rows: [
            {
              decorTypes: {},
              selectedDecor: "",
              selectedDes: "",
              selectedQty: "",
              selectedRate: "",
              line_total: 0,
              descriptions: {},
            },
          ],
        },
      ],
    };
  },

  methods: {
    addTab(tab) {
      // deep clone is needed here
      let newTab = JSON.parse(JSON.stringify(tab));
      this.tabs.push(newTab);
    },
    addRow(tabIndex) {
      this.tabs[tabIndex].rows.push({
        selectedDecor: "",
        selectedDes: "",
        selectedQty: "",
        selectedRate: "",
        line_total: 0,
        decorTypes: {},
      });
    },
  },
};

Vue.createApp(App).mount('#app');

<template id="app-template">
  <div class="hello">
    <ul>
      <li v-for="(tab, index) in tabs" :key="index">
        tab - {{ index }} - {{ tab.rows.length }}
        {{ tab.rows }}
        <button @click="addTab(tab)">Duplicate this tab</button
        ><button @click="addRow(index)">Add a new row of this tab</button>
      </li>
    </ul>
  </div>
</template>

<div id="app"></div>

<script src="https://unpkg.com/vue@3"></script>

It was required a Deep Cloning, if not the Javascript reference (of rows array) would be only referenced and not copied. To know more about it see here

when i click on add new row then console shows this - "Cannot read properties of undefined (reading 'rows') " — rahi bd, Aug 18 '22 at 11:40
can you please help me with this one https://stackoverflow.com/questions/73404289/can-not-fetch-the-data-dependent-dropdown-according-to-another-data — rahi bd, Aug 18 '22 at 13:56

vue js ARRAY push

1 Answers1