Vuejs，我正在尝试将子对象推送到数组

Question

我正在开始编程，我正在尝试将一个子对象推送到一个数组，它显示为例如 1、1.1、1.2、1.3 等。它们是带有子句的子句，在这里我留下了我已经拥有的代码笔。任何帮助或建议都会受到欢迎。谢谢

https://codepen.io/ivanmercado9/pen/GGGJpg?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-content class="pa-5">
      <v-card flat class="grey lighten-2 ma-3 pa-3">
                    <v-card-text>
            <v-layout row wrap> 
              <v-flex xs10 offset-xs1>
                <v-card dark color="deep-purple darken-1">
                  <v-card-text> 
                    <div v-for="(item, index) in clauses">


                      <p>Clause {{1+index}}</p>
                      <v-text-field label="Clause" textarea v-model="item.description"></v-text-field>


                      <!--      Sub Clause            -->
                      <div v-for="(item, index) in clauses.subclauses">
                        <p>Sub Clause {{1+index}}</p>
                        <v-text-field label="Clause" textarea v-model="item.description"></v-text-field>
                      </div>


                      <v-btn dark color="light-green" @click="addSubClause(i)">Add Sub Clause</v-btn> 
                      <div v-if="clauses.length > 1">
                          <v-btn dark color="red" @click="deleteElement(index)">Delete Clause</v-btn>

                      </div>

                    </div>
                    <v-btn dark color="light-green" @click="addClause()">Add Clause</v-btn>
                  </v-card-text>
                </v-card>
              </v-flex>  
            </v-layout>
          </v-card-text>
      </v-card>
      <v-divider></v-divider>

      <v-card flat class="grey lighten-2 ma-3 pa-3">
                    <v-card-text>
           Clauses: {{ clauses }}
          </v-card-text>
      </v-card>
      <v-card flat class="grey lighten-2 ma-3 pa-3">
                    <v-card-text>
            <div v-for="(item, index) in clauses">
              <p><span>{{1+index}}.</span><span> {{item.description}}</span></p>
            </div>
          </v-card-text>
      </v-card>
    </v-content>
  </v-app>
</div>

new Vue({
  el: '#app',
  data: () => ({
    //
    clauses: [],
  }),
  methods: {
    addClause: function () {
      this.clauses.push({
        description: '',
      })
    },
    addSubClause: function (i) {
      this.clauses[i].subclauses.push({
        description: '',
      })
    },
    deleteElement: function(val) {
              this.clauses.splice(val, 1)
      },

  },
  created() {
    // this.addClause()
  },
})

Answer 1

两个问题。

首先，"Add Sub Clause" 按钮上的 i 您的 @click 不是动态参数 — 它不表示索引，它是 undefined。您需要 mechanism/variable 到 cache/reference 每个 "Add Sub Clause" 按钮所指的子句。编辑：看起来 index 指的是有问题的条款。

<v-btn dark color="light-green" @click="addSubClause(index)">Add Sub Clause</v-btn>

接下来，一旦您传递了一个合法的索引，您将无法在新的属性上使用 Array prototype 的方法——在本例中为 .push() this.clauses[i] 除非你声明它是一个数组。您可以在创建每个 Clause 实例时执行此操作：

addClause: function () {
    this.clauses.push({
        description: '',
        subclauses: []
    })
},

Vuejs，我正在尝试将子对象推送到数组

Vuejs, I am trying to do a push of a subobject to an array

arrays

push

vuejs2

vuetify.js