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

Posted 2021-04-30

我在编程中开始，我正在尝试将子对象推送到数组，并且它显示为例如1,1.1,1.2,1.3等。它们是子条款的子句，这里我留下了一个codepen与我已经有。任何帮助或建议都很受欢迎。谢谢

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()
  },
})

答案

两个问题。

首先，i你的@click在“Add Sub Clause”按钮上不是动态参数 - 它不是指示索引，而是undefined。您需要一个机制/变量来缓存/引用每个“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: []
    })
},