vue 输入框中输入数据,然后点击按钮把输入的值渲染到页面上,点击两次显示两条数据

Question

### 问题描述

我写了用this获取input中的值,的确可以渲染但是输入框一改变,渲染的数据就跟着改变

相关代码

<el-button type="primary" @click="tianjia">主要按钮</el-button>

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-button type="primary" size="mini" @click="addjizhong">添加机种</el-button>
<el-form :model="dataForm">
<el-form-item label="日期">
  <el-input v-model="dataForm.modelName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="姓名">
  <el-input v-model="dataForm.mbVesion" autocomplete="off"></el-input>
</el-form-item>
  <el-table :data="list" @selection-change="handleSelectionChange">
    <el-table-column property="modelName" label="日期" width="150"></el-table-column>
    <el-table-column property="mbVesion" label="姓名" width="200"></el-table-column>
  </el-table>
</el-form>
</el-dialog>

addjizhong() {

  this.list.push(this.dataForm);
  this.list= this.list.concat(this.list2)
},

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

参考：问题结果

建议你每次添加完成后，将输入框的内容给清空。本例没有实现，你可以自己实现。

Answer 2

你期待的结果是什么？实际看到的错误信息又是什么？

• 如果问的是为什么点击两次会添加两个，因为你的点击方法 addJiZhong 没有处理重复内容，和情况输入框
• 如果问的是为什么输入框一变化，table的表格内容也变化，那是因为table里面的list数组放的是dataForm 对象，这是一个引用类型，是公用，也就是你的list里面的多个 dataForm 对象和输入框是公用的，所以一改全改，可以修改你的 addjizhong 方法：this.list.push({...this.dataForm}); 这样就新建了一个对象；

另外这个addjizhong的方法名字好卡哇伊；一看就明白了。