vue js v-for 输入类型与 v-model

Question

我想要两个带有 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”><–显示Kitty

原文由 Tommy Tang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

JSFiddle 示例

原文由 T. Dirks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 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>

原文由 poke 发布，翻译遵循 CC BY-SA 4.0 许可协议