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中，因为from 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>

Answer 2

您可以保留CONTAINER 1 "one" false [CONTAINER [2, "two", false]] 42 true的选择权，只需添加v-model修饰符即可使Vue在number中对其进行迭代。但是您需要提供更改动态输入值并存储它的方法（请参见v-for方法）。

如果您想清除已更改的选定号码上的输入，可以观看（请参见摘录），否则您应将updateAnswer上的select拆分为v-model和:value并清除{{1 }}更改处理程序中的数组。

@change

answers

根据选择下拉值将x输入数量加到表格中

2 个答案: