vue js數組推送

Question

我在數組（選項卡）中有一個數組（行）。 我想復制數組。 現在我如何分別復制 rows 數組和 tabs 數組。 就像當我單擊“添加行”按鈕時將添加一行，當我單擊“添加選項卡”按鈕時，將添加帶有行的整個選項卡。 我正在嘗試這種方式——

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: {},
      });
    },
}

Answer 1

你的意思是這樣的嗎？

 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>

需要深度克隆，如果不是，則 Javascript 引用（行數組）將僅被引用而不被復制。 要了解更多信息，請參見此處