Question

我正在使用Vue和Quasar Framework创建一个由嵌套对象（请参见下面的对象结构）组成的表单。我想添加问题，并为每个问题提供尽可能多的答案（注意：我已用完整文件编辑了问题。）单击添加按钮时出现问题。我尝试添加一个问题，它确实允许我通过单击初始问题（q0）来创建另一个问题（q1）等。但是，如果我想通过单击（q1）来创建问题，则在控制台中会出现以下错误。

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'questions' of undefined"

我还尝试了以下方法 this.forms [index] .questions [index] .answerChoices.push 我收到以下警告：

[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'questions' of undefined"

我在StackOverflow和其他站点上研究了各种解决方案。我已经尝试实现它们，但到目前为止都没有奏效。有什么建议吗？

    <template>
  <q-page>
          <q-card class="bg-cyan-2 q-ma-xl">
            <q-card-main>
            <div v-for="form in forms" :key="form.id">
              <q-field class="q-mb-sm" label="Form Title: " helper="Please enter the title of the question.">
                <q-input v-model="form.name" type="text" clearable />
              </q-field>
              <q-card-separator class="q-mb-md q-mt-xl"/>
           <div v-for="(question, index) in form.questions" :key="question.id">
            <q-btn class="q-mb-md" round size="sm" color="amber" icon="add" @click="addRowQuestions(index)" />
            <q-field class="q-mb-sm" label="Question Title: " >
              <q-input v-model="question.text" />
            </q-field>
            <q-card-separator class="q-mb-md q-mt-xl"/>
              <div v-for="(answerChoice, index) in question.answerChoices" :key="answerChoice.id">
                <q-btn class="q-mb-md" round size="sm" color="green" icon="add" @click="addAnswers(index)" />
                <q-field class="q-mb-sm" label="Answer ID: ">
                  <q-input v-model="answerChoice.answerId" type="number" clearable />
                </q-field>
            <q-card-separator class="q-mb-md q-mt-xl"/>
              </div>
           </div>
           </div>
            </q-card-main>
          </q-card>
  </q-page>
</template>

<script>

export default {
  data () {
    return {
      forms: [
        {
          name: '',
          questions: [
            {
              text: '',
              answerChoices: [
                {
                  answerId: ''
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    addRowQuestions (index) {
      this.forms[index].questions.push({
        text: '',
        answerChoices: []
      })
    },
    addAnswers (index) {
      this.forms[index].questions[index].answerChoices.push({
        answerId: ''
      })
    }
  }
}
</script>

Answer 1

添加一个问题时，您不会创建新表单，而只是创建表单[0]中的新问题。因此没有“ this.forms [1]”，因此this.forms [1] .questions未定义。

Answer 2

我已经能够使它起作用。以下是我修改过的工作代码，适合任何有兴趣的人。请注意，我添加了2个额外的按钮，可以删除问题和答案。

<div v-for="(form, fIndex) in forms" :key="form.id">
          <q-field class="q-mb-sm" label="Form Title: " helper="Please enter the title of the form.">
            <q-input v-model="form.name" type="text" clearable />
          </q-field>
          <q-card-separator class="q-mb-md q-mt-xl"/>
       <div v-for="(question, qIndex) in form.questions" :key="question.id">
        <q-btn class="q-mb-md" round size="sm" color="amber" icon="add" @click="addRowQuestions(fIndex)" />
        <q-btn class="vertical-top" v-show="qIndex !==0" round size="sm" color="blue" icon="remove" @click="remRowQs(fIndex)" />
        <q-field class="q-mb-sm" label="Question Title: " >
          <q-input v-model="question.text" />
        </q-field>
        <q-card-separator class="q-mb-md q-mt-xl"/>
          <div v-for="(answerChoice, aIndex) in question.answerChoices" :key="answerChoice.id">
            <q-btn class="q-mb-md" round size="sm" color="green" icon="add" @click="addAnswers(fIndex, qIndex)" />
            <q-btn class="vertical-top" v-show="aIndex !==0" round size="sm" color="negative" icon="remove" @click="remRowAns(fIndex, qIndex)" />
            <q-field class="q-mb-sm" label="Answer ID: ">
              <q-input v-model="answerChoice.answerId" type="number" clearable />
            </q-field>
        <q-card-separator class="q-mb-md q-mt-xl"/>
          </div>
       </div>
       </div>

    methods: {
    addRowQuestions (fIndex) {
      this.forms[fIndex].questions.push({
        qtext: '',
        answerChoices: [
          {
            answerId: ''
          }
        ]
      })
    },
    addAnswers (fIndex, qIndex) {
      this.forms[fIndex].questions[qIndex].answerChoices.push({
        answerId: ''
      })
    },
    remRowQs (fIndex) {
      this.forms[fIndex].questions.splice(fIndex, 1)
    },
    remRowAns (fIndex, qIndex) {
      this.forms[fIndex].questions[qIndex].answerChoices.splice(qIndex, 1)
    }
  }
}

Vue-推送嵌套对象

2 个答案: