代码之家 › 专栏 › 技术社区 › JonYork

根据选择下拉值将x个输入添加到窗体

vuejs2 vue.js forms javascript

JonYork · 技术社区 · 6 年前

我遇到了一个情况,我不知道什么是最好的办法来处理它。

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

我有一个下拉菜单有1到10个选项。

如果他们选择,比如说5,我希望出现5个文本输入。

一些代码:

下拉菜单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,
            }

我是否需要在下拉列表select上触发一个函数,该函数构建一个数组来迭代所需的输入,或者是否有一些用VueJS构建的函数来完成此操作?

2 回复 | 直到 6 年前

saurmo 6 年前

将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>

Max Sinev 6 年前

你可以留下来 v-model 选择时,只需添加 number 使Vue在其上迭代的修饰符 v-for . 但您需要提供方法来更改动态输入值并将其存储(请参见 updateAnswer 方法)。

如果要清除所选号码更改后的输入,可以查看(请参阅代码段),否则应拆分 V-模型 选择到 :value 和 @change 并清除 answers 更改处理程序中的数组。

new Vue({
  el: "#app",
  data: {
    rubric: {
        answer_number: 2
    },
    answers: []
  },
  methods: {
      updateAnswer(i, val) {
         Vue.set(this.answers, i, val);
      }
  },
  watch: {
     // clear array on number changed
     ['rubric.answer_number']() {
         this.answers = [];
     }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select id="answer_number" name="answer_number" required="required" class="custom-select"v-model.number="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" :value="answers[index]" @input="updateAnswer(index, $event.target.value)" name="score_text" placeholder="Yes" type="text" required="required" class="form-control here">
   </div>
  </div>
</div>