Multyple index di vue.js

[dinizarAfrian]

Bagaimana agar field input type question bisa dinamis sesuai dengan index induknya?

Berikut script nya

<template>
    <div style="width:100%; margin-top:15px;">
        <div class="ui segment" v-for="(form, index) in forms" :key="index">
            <div class="ui grid">
                <div class="fourteen wide column">
                    <div class="ui transparent input" style="border-bottom: 1px solid black;">
                        <input type="text" placeholder="Type Title" :name="`type_title[${index}]`" v-model="form.type_title">
                    </div>
                </div>
                <div class="two wide column" v-if="index > 0">
                    <button type="button" class="ui small button red icon" @click="removeForm(index)"><i aria-hidden="true" class="icon minus" color="#ff0000"></i></button>
                </div>
            </div>
            <div class="ui grid" v-for="(row, index_rows) in form.type_question" :key="index_rows">
                <div class="fifteen wide column">
                    <input type="text" placeholder="Type Question" :name="`type_question[${index}][${index_rows}]`" v-model="form.type_question">
                </div>
                <div class="one wide column" v-if="index_rows > 0">
                    <button type="button" class="ui small button red icon" @click="removeTypeQuestion(index, index_rows)"><i aria-hidden="true" class="icon minus" color="#ff0000"></i></button>
                </div>
                <div class="one wide column" v-else>
                    <button type="button" class="ui small button green icon" @click="addTypeQuestion(index)"><i aria-hidden="true" class="icon plus" color="#ff0000"></i></button>
                </div>
            </div>
        </div>
        <button type="button" class="ui green button left" @click="addForm()"><i class="plus icon" aria-hidden="true"></i>Add New Title</button>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        forms: [{
          type_title: '',
          type_question: ['']
        }]
      }
    },
    methods: {
      isEmpty(obj) {
        for(var key in obj) {
          if(obj.hasOwnProperty(key))
            return false;
        }
        return true;
      },
      addForm (type_title= '', type_question= ['']) {
        this.forms.push({
          type_title: type_title,
          type_question: type_question
        })
      },
      resetForm () {
        this.forms = []
      },
      removeForm (index) {
        this.forms.splice(index, 1)
      },
      addTypeQuestion () {
        this.form.type_question.push({
            type_question: 'some'
        })
      },
      removeTypeQuestion (index, index_rows) {
        this.form[index].type_question.splice(index_rows, 1)
      },
      getEditItems () {
        if (!this.isEmpty(this.editItems)) {
          this.resetForm()
          this.editItems.forEach(function (item) {
            this.addForm(item.type_title, item.type_question)
          }, this)
        }
      },
    },
    mounted () {
      this.getEditItems()
    }
  }
</script>

error yg didapat ketika klik tambah type question ( method addTypeQuestion () )

[rama]

cannot read properties itu bukannya variable-nya belum di declare? coba yang di push type_question: 'sebuah pertanyaan'

[dinizarAfrian]

addTypeQuestion () {
        this.form.type_question.push({
            type_question: ['']
        })
      },

errornya sama mas

[dinizarAfrian]

solved dengan ‘push.apply’

addTypeQuestion (index) {
        this.forms.push.apply(
            this.forms[index].type_question,
            ['']
        )
      },
      removeTypeQuestion (index, index_rows) {
        this.forms[index].type_question.splice(index_rows, 1)
      },