时间戳

首页 > 解决方案 > Vuejs，我正在尝试将子对象推送到数组

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

问题描述

我开始编程，我试图将一个子对象推送到一个数组，并显示它例如 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()
  },
})

标签： arraysvuejs2pushvuetify.js

解决方案

两个问题。

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

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

接下来，一旦您传递了一个合法的索引，您将无法在新属性上使用Array 原型的方法（.push()在这种情况下），this.clauses[i]除非您将其声明为数组。您可以在创建每个 Clause 实例时执行此操作：

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

推荐阅读