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

两个问题。

首先，“添加子句”按钮上的i您的@click不是动态参数，它不是指示索引，而是undefined。您将需要一种机制/变量来缓存/引用每个“添加子句”按钮所引用的子句。编辑：看来index是指有问题的条款。

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

接下来，一旦传递了合法索引，就无法在.push()的新属性上使用Array prototype的方法-在这种情况下为this.clauses[i]除非您声明它是一个数组。创建每个子句实例时，您可以这样做：

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

Vue.js，我正在尝试将子对象推入数组

1 个答案: