Question

我有<input>个字段，如

<input type="text" v-model=user.name" />
<input type="text" v-model="user.phone" />
<button @click="add">add user</button>

每当我点击add user时，它都会将user推送到users数组并清除v-model（以便推送更多用户）。我的add()方法如下所示。

add()
{
  this.users.push( this.user );
  this.user.name = '';
  this.user.phone = '';
}

但重置user v-model后，users数组中的元素也会变为空字符串。如何重置v-model而不更改users数组中的数据？

Answer 1

最简单的方法就是按属性重置整个user对象而不是属性：

add()
{
  this.users.push( this.user );
  this.user = {name: '', phone: ''};
}

演示：

＆＃13;

new Vue({
  el: '#app',
  data: {
    user: {name: '', phone: ''},
    users: []
  },
  methods: {
    add() {
      this.users.push(this.user);
      this.user = {name: '', phone: ''};
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  name: <input type="text" v-model="user.name" /><br>
  phone: <input type="text" v-model="user.phone" /><br>
  <button @click="add">add user</button>
  <hr>
  users: {{ users }}
</div>

＆＃13;

为什么不起作用？

因为当你这样做时：

this.users.push( this.user );
// this changes the name of the user that happens to be inside the users array
this.user.name = '';

您正在将this.user添加到this.users数组中。如果您稍后更改它，例如this.user.name = 'something';，则表示您正在更改同一个对象（现在也在this.users数组内）。

另一方面，当覆盖它时，它是一个新对象：

this.users.push(this.user);
this.user = {name: '', phone: ''};
// the line above makes `this.user` point to (reference) a new object.
// the object that was pushed into the array still exists, but this.user does not point to it anymore
// the line below sets the name of the user created in the line above, not the previous (that is in the array)
this.user.name = 'bob';

替代方案：克隆。

如果您想要遵循这条道路，您可以选择其他方式。来自＆＃34;手册＆＃34;克隆：

＆＃13;

new Vue({
  el: '#app',
  data: {
    user: {name: '', phone: ''},
    users: []
  },
  methods: {
    add() {
      this.users.push({name: this.user.name, phone: this.user.phone});
      this.user.name = '';
      this.user.phone = '';
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  name: <input type="text" v-model="user.name" /><br>
  phone: <input type="text" v-model="user.phone" /><br>
  <button @click="add">add user</button>
  <hr>
  users: {{ users }}
</div>

＆＃13;

进行深度克隆：

＆＃13;

new Vue({
  el: '#app',
  data: {
    user: {name: '', phone: ''},
    users: []
  },
  methods: {
    add() {
      let userDeepClone = JSON.parse(JSON.stringify(this.user));
      this.users.push(userDeepClone);
      this.user.name = '';
      this.user.phone = '';
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  name: <input type="text" v-model="user.name" /><br>
  phone: <input type="text" v-model="user.phone" /><br>
  <button @click="add">add user</button>
  <hr>
  users: {{ users }}
</div>

＆＃13;

浅层克隆：

＆＃13;

new Vue({
  el: '#app',
  data: {
    user: {name: '', phone: ''},
    users: []
  },
  methods: {
    add() {
      let userShallowClone = {...this.user}; // or Object.assign({}, this.user);
      this.users.push(userShallowClone);
      this.user.name = '';
      this.user.phone = '';
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  name: <input type="text" v-model="user.name" /><br>
  phone: <input type="text" v-model="user.phone" /><br>
  <button @click="add">add user</button>
  <hr>
  users: {{ users }}
</div>

＆＃13;

重置v模型而不更新其因变量

1 个答案: