Vue.js 如何在vuejs中使用临时值在表中添加新记录

我有一张有记录的桌子。单击字段时，有一个用于内联编辑的选项。有一个添加新行的选项

问题是，当我单击Addnew两次，并且表中有两个空行，其中包含输入并开始键入时，两行的字段值都会更改

这是因为我使用了

v-model=“temp.name”

和

isCreateMode

，在我的例子中，这个

temp

模型有几行，但我不确定如何处理

temp

是必需的，因为用户可以取消编辑该字段。我使用相同的输入字段进行创建和编辑

//在组件中
//这里还有其他代码
计算：{
…地图状态([
“editModeField”，
“编辑用户”，
“编辑模式”，
“createMode”，
“临时工”，
“用户”
]),
…地图绘制者([
“过滤者”
]),
isEditable（字段、用户、索引）{
if（此.isCreateMode（用户））{
返回此。用户[索引]==用户
}
返回this.editedUser==user&&this.editModeField==
领域
},
isEditMode（字段，用户）{
返回this.editMode&&this.editedUser===user&&
this.editModeField==字段
},
isCreateMode（用户）{
返回this.createMode&！user.id
},
addUser（用户，索引）{
如果（！用户）{
用户={
名称：“”，
汽车：''
}
this.toggleCreateMode（true）
this.createUser（用户）
返回
}
//这会向端点发出请求
this.storeUser（用户，索引）
},
//actions.js
createUser（{state，commit}，user）{
提交（“创建用户”，用户）
提交（'SET_TEMP_OBJECT'，{name:''，car:null}）
},
//突变
创建用户（状态、用户）{
state.users.push（用户）
},
设置临时对象（状态、用户）{
state.temp=用户
},

{{index+1}}
{{user.name}
//其他栏目

如何防止用户添加新输入，除非他提交现有输入：

我真的看不出你的代码是如何工作的，因为你没有提供商店数据的

temp

/状态，但建议的解决方案应该是这样的：

newvue({
el:“应用程序”，
数据：{
用户：['foo'，'bar']，
输入：“”，
柜台:0
},
方法：{
addUser（用户）{
如果（this.counter==0）{
这个柜台++
}else if（this.counter==1&&user）{
这个柜台--
this.input=“”
this.users.push（用户）
}否则{
警报（'请填写现有输入'）
}
}
}
})

地址用户

{{user}

谢谢，这是一个解决办法。我正在尝试在没有这样验证的情况下这样做。但我不确定这是否可行。看起来complex@mistery_girl如果您提供了完整的代码或演示/实时模板的分支，我可以在您的代码上实现这一点example@mistery_girl还有另一种传递输入文本（值）的方法无需使用

v-model

，即可通过事件立即访问该方法。使用该方法，您可以处理尽可能多的输入，我尝试过这种方法，但问题是逻辑复杂，这破坏了编辑功能。我非常感谢，但repo是私有的，无法共享。我将尝试调试它，谢谢。