Question

我想使用Vue.js编辑用户列表。每个用户都有一个名称和年龄。看来v-for是使用列表的正确指令，而v-model是将input的内容绑定到列表中特定元素的正确指令。

所以我试图像这样实现它：

new Vue({
  el: '#exercise',
  data: {
    users: [{
      name: "martin",
      age: 32
    }]
  },
  methods: {
    add_user: function() {
      this.users.push({
        name: "",
        age: ""
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="exercise">
  <form id="list">
    <div></div>
    <div v-for="user in users">
      <input v-model="user.name">
      <input v-model="user.age">
      <button @click="add_user">+</button>
    </div>
  </form>
</div>

但是，一旦我单击按钮以添加新用户，带有输入字段的新行将仅显示一秒钟，然后消失，从而使用户列表仅包含一个元素。

请，你能告诉我我在做什么错吗？

Answer 1

原因是<button>与<form>和<a>一起单击时，它会自动执行请求，因此刷新或消失，因为它无法尝试使用<button @click.prevent="add_user" />或{{1 }}

<div id="exercise">
  <form id="list">
    <div></div>
    <div v-for="user in users">
      <input v-model="user.name">
      <input v-model="user.age">
      <a @click="add_user">+</a> //solution
      <button @click.prevent="add_user">+</button> //another solution 
    </div>
  </form>
</div>

Answer 2

该按钮正在提交表单，添加.prevent以停止操作：

new Vue({
  el: '#exercise',
  data: {
    users: [{
      name: "martin",
      age: 32
    }]
  },
  methods: {
    add_user () {
      this.users = [ ...this.users, {
        name: "",
        age: ""
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="exercise">
  <form id="list">
    <div v-for="(user, index) in users" :key="index">
      <input v-model="user.name" :key="`name-${index}`">
      <input v-model="user.age" :key="`age-${index}`">
    </div>
    <button @click.prevent="add_user">+</button>
  </form>
</div>

Answer 3

您需要设置按钮的类型，因为它位于表单内部，因此可以回退提交按钮。

另外，最好定义一个：key来帮助vue在v-for上告诉一行之间的差异。

new Vue({
  el: '#exercise',
  data: {
    users: [{
      id:new Date().getTime(),
      name: "martin",
      age: 32
    }]
  },
  methods: {
    add_user: function() {
      this.users.push({
        id:new Date().getTime(),
        name: "",
        age: ""
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="exercise">
  <form id="list">
    <div v-for="user in users" :key="user.id">
      <input v-model="user.name">
      <input v-model="user.age">
      <button type="button" @click="add_user">+</button>
    </div>
  </form>
</div>

如何结合v-for和v-model来编辑对象列表？

3 个答案: