vue.js - 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"><--显示小猫

标签： vue.js

Answer 1

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

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>