Question

我是Vue框架的新手，我试图基于组件在父for循环中插入for循环。我已经通过了两天的测试，测试了不同的方法，但是仍然无法正常工作。

我尝试构建的应用程序应使用户可以创建测验。他可以通过单击按钮来添加新的“问题”表单。默认情况下，每个问题块都包含一个答案输入。通过单击另一个按钮，用户可以增加在所选问题栏上输入答案的次数。

上面的代码使问题输入出现在浏览器上，创建新问题块的addQuestion函数也可以使用，但是该问题输入下的答案输入不存在。此外，浏览器控制台不会返回任何错误。

请有人帮助我了解我的代码中有什么问题吗？

非常感谢。

let questionblock = Vue.component('questionblock', {
  delimiters: ['[[', ']]'],
  data: function() {
      return {
          id_count:1,
          answers: [
              {id:1}
          ]        
      }
  },
  props: ['question_prop'],
  methods: {
      addQuestion:  function() {
              ++app.id_question;
              let new_id = app.id_question;
              app.questions.push({id: new_id});
          },
      removeQuestion: function() {
              --app.id_question;
              app.questions.pop();
          }
  },
  template: '<div class="block-question">'                   
              +'<legend>Question [[ question_prop.id ]]</legend>'
              +'<span class="num-question d-inline-block">[[ question_prop.id ]]</span>'
              +'<textarea class="form-control question-control d-inline-block" name="question" placeholder="Entrez votre question"></textarea>'
              +'<i class="fas fa-plus-circle" v-on:click="addQuestion"></i>'
              +'<i class="fas fa-trash" v-on:click="removeQuestion"></i>'
          +'</div>'

});

let answerblock = Vue.component('answerblock', {
  delimiters: ['[[', ']]'],
  props: ['answer_prop'],
  template: '<div class="block-answer">'
              +'<span class="num-answer d-inline-block">[[ answer_prop.id ]]</span>'
              +'<textarea class="form-control answer-control d-inline-block" type="text" name="" placeholder="Entrez votre réponse"></textarea>'
              +'<i class="fas fa-plus-circle"></i>'
              +'<i class="fas fa-trash"></i>'
          +'</div>'
});

var app = new Vue({
  delimiters: ['[[', ']]'],
  components: {questionblock, answerblock},
  el: '#app',
  data: {
      id_question: 1,
      questions: [
          {
              id: 1,
              answers: [{id:0}]
          }
      ],
  },
});

<div id="app" class="col main-content">
    <questionblock
    v-for="question in questions"
    v-bind:question_prop="question"
    v-bind:id_question="id_question"
    v-bind:key="question.id">
        <answerblock 
        v-for="answer in question.answers"
        v-bind:answer_prop="answer"
        v-bind:key="answer.id">
        </answerblock>
    </questionblock>
</div>

在Vue.js中嵌套循环的组件

0 个答案: