vue js v-for 输入类型和 v-model答案

【问题标题】：vue js v-for input type with v-modelvue js v-for 输入类型和 v-model
【发布时间】：2019-04-30 03:39:19
【问题描述】：

我想要两个输入字段 name1 和 name2，name1 = Peter，name2= Kitty。但我没有任何想法来处理它。

<div v-for="list in item">
    <input type="text" id="name" name="name" v-model="name"></>
    {{list.name}}
</div>

data() {
    return {
        item: [{ name: 'Peter' },{ name: 'Kitty' }],
        name: ''
    }
}

我要：

input type="text" id="name1" name="name2" v-model="name1">

input type="text" id="name1" name="name2" v-model="name2">

【问题讨论】：

标签： vue.js

【解决方案1】：

问题在于您的v-model。您需要将其绑定到 item 数组中对象的名称属性。

将v-model="name" 更改为v-model="list.name"

JSFiddle example

【讨论】：

得到 =name-${index} name="name" v-model="list.name" />
我找到了自己的方式：id="'name'+index"
嗨，@T。德克斯我还有一个问题。我如何使用@input 正则表达式来检查我的值并替换模型值？谢谢。

【解决方案2】：

如果您要显示多个输入元素，则还应该有多个用于放置数据的位置。例如，您可以这样做，向 item 元素添加 value 属性：

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Peter', value: '' },
      { name: 'Kitty', value: '' }
    ],
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="item in items">
    <label>{{item.name}}:</label>
    <input type="text" name="item.name" v-model="item.value">
  </div>

  <!-- Output for debugging purposes -->
  {{items}}
</div>

【讨论】：

【解决方案3】：

<div v-for="list in item">
    <input type="text" v-model="list.name"></>
    {{list.name}}
</div>

data() {
    return {
        item: [{ name: 'Peter' },{ name: 'Kitty' }],
        name: ''
    }
}

【讨论】：

@MikeW 自我解释

【解决方案4】：

<div v-for="list in item" :key="list.id">
    <input type="text" :id="list.name" :name="list.name" :v-model="list.name"/>
    {{ list.name }}
</div>

【讨论】：