javascript - 根据选择下拉值向表单添加 x 个输入

Question

我遇到了一种情况，我不确定处理它的最佳方法是什么。

我有一个需要动态的表单。基本上就是在表格情况中添加多少个电话号码。

我有 dropdown_1，其中包含选项 1 到 10。

如果他们选择，比如 5，我希望显示 5 个文本输入。

一些代码:

Dropdown_1

<select id="answer_number" name="answer_number" required="required" class="custom-select"v-model="rubric.answer_number">
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
</select>

输入所需内容

<div class="form-group row" v-for="(score, index) in rubric.answer_number">
 <label for="score_text" class="col-2 col-form-label">Score text</label> 
 <div class="col-10">
  <input id="score_text" name="score_text" placeholder="Yes" type="text" required="required" class="form-control here">
 </div>
</div> 

数据存储:

rubric: {
 reader_type: null,
 document_type: null,
 title: null,
 question: null,
 answer_number: null,
 score_text_0: null,
 score_text_1: null,
 score_text_2: null,
 score_text_3: null,
 score_text_4: null,
 score_text_5: null,
 score_text_6: null,
 score_text_7: null,
 score_text_8: null,
 score_text_9: null,
 score_text_10: null,
            }

我是否需要在下拉选择上触发一个函数，该函数会构建一个数组来迭代所需的输入，或者是否有一些使用 VueJS 内置的方式来执行此操作？

Answer 1

将 parseInt 添加到 rubric.answer_number 因为 select 是一个字符串，而脚本是:

 var app = new Vue({
      el: '#app',
      data: {
        message: 'Seleccionar: ',
        rubric: { answer_number: 2 }
      }
    })

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
    <select id="answer_number" name="answer_number" required="required" class="custom-select" v-model="rubric.answer_number">
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    Seleccionados: {{rubric.answer_number}}
    <div class="form-group row" v-for="(score, index) in parseInt(rubric.answer_number)">
      <label for="score_text" class="col-2 col-form-label">Score text</label>
      <div class="col-10">
        <input id="score_text" name="score_text" placeholder="Yes" type="text" required="required" class="form-control here">
      </div>
    </div>
  </div>