Vuejs, я пытаюсь сделать толчок подобъекта в массив - PullRequest
Новая
       53

Vuejs, я пытаюсь сделать толчок подобъекта в массив

0 голосов
/ 25 июня 2018

Я начинаю программирование, я пытаюсь выполнить подтолкание подобъекта в массив, и это показано, например, в 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()
  },
})

1 Ответ

0 голосов
/ 25 июня 2018

Две проблемы.

Во-первых, i your @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: []
    })
},
...