如何访问 vue.js 中动态文本框的值答案

【问题标题】：How do I access values of dynamic textboxes in vue.js如何访问 vue.js 中动态文本框的值
【发布时间】：2021-04-15 17:36:12
【问题描述】：

我正在根据之前选择的选项动态生成这个 vue 模板，所以根据用户从上一步中选择的复选框的数量，我会生成这个模板。

  <template  v-for="(items, index) in appliedPortfolioItems">
<div>
    <h5> {{items.displayName}} {{items.availableBalance}}</h5>
    <div class="row">
        <p>{{items.coreSystemOption}}</p>

        <div class="col s6">
            <h6>Eligible Loan Amount</h6>
            <h4>{{items.allowedAmount}}</h4>
        </div>

        <div class="col s6">
            <h6>Enter Required Loan Amount</h6>
            <div class="input-field">
                <input type="text">
            </div>
        </div>
    </div>
</div>
</template>

请问如何通过 v-model 访问每个文本框中输入的值。对于更多上下文，用户需要能够在他们从上一步中选择的每个帐户上输入贷款金额。

【问题讨论】：

标签： html vue.js v-for v-model

【解决方案1】：

您应该在items 对象中有一个道具来存储在输入框中输入的文本。这样你就可以像这样为input标签设置v-model：

<div class="input-field">
  <input type="text" v-model="items.userInput">
</div>

【讨论】：

【解决方案2】：

首先，您需要在脚本部分的数据中声明一个“输入”数组。

import Vue from 'vue';

export default {
  // For demonstration purpose only. For props, always use object syntax
  props: ['bar'], // bar is an array passed down to the component
  data() {
    return {
      inputs: []
    }
  }
}

然后，在模板部分进行操作

<div v-for="(foo, index) in bar">
  <input type="text" v-model="inputs[index]" />
</div>

工作示例

new Vue({
    el: '#app',
    data: () => ({
        inputs: []
    })
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
  <div id="app">
    <input type=text v-model="inputs[0]" />
    <div> First input is {{ inputs[0] }} </div>
    
    <input type=text v-model="inputs[1]" />
    <div> Second input is {{ inputs[1] }} </div>
  </div>
</body>

【讨论】：