Javascript Vue，单击即可克隆div，但具有唯一输入

我已经成功地设置了这个页面，在这里我动态地添加了一个div/行输入，这可以通过单击链接，它在当前div下面添加了相同的div，并提供了所有正确的输入

此外，其中一个输入设置为自动建议/自动完成搜索框。这与我键入搜索和返回结果时的效果非常好。如果我单击一个结果，它将替换该输入中的文本

因此，这里的两个主要因素是完美的。但我有一个问题：如果我添加一个或多个div，每个div中的输入都反映了相同的文本。也就是说，如果我在第三行的输入中键入“Test”，它将在每个div/行的相同输入中显示

我如何解决这个问题，使每个添加的div的输入都有自己的文本，但它们都被添加到同一个v-model数组中

新Vue{ 组件：{}， el:commonNameDiv， 资料{ 返回{ 搜索字符串：['']， 结果：[]， savedAttributes:[]， 卡片：[] } }, 方法：{ 自动完成{ 这个结果=[]； console.logthis.searchString； 如果this.searchString.length>2{ 这一结果=[ {attribute_value:apple}， {属性值：banane} ] } }, saveAttributeresult{ this.savedAttributes=[]； console.log'cool'； this.savedAttributes.pushresult.attribute_值； log‘这里是属性’； console.logthis.savedAttributes； this.searchString=result.attribute_值； 这个结果=[]； }, addCard：函数{ 这个。卡。推{ 索引： } } } }

---

出现此问题的原因是您的卡通过v-model绑定到单个数据属性searchString。为了解决这个问题，需要将它们绑定到各个属性

解决方案是为卡数组中的每个对象添加一个新属性。您可以在addCard方法中实现这一点。比如：

addCard：函数{ this.cards.push{searchString:}//在这里，每张卡都有自己的searchString值

---

} 出现此问题的原因是您的卡通过v-model绑定到单个数据属性searchString。为了解决这个问题，需要将它们绑定到各个属性

解决方案是为卡数组中的每个对象添加一个新属性。您可以在addCard方法中实现这一点。比如：

addCard：函数{ this.cards.push{searchString:}//在这里，每张卡都有自己的searchString值 } 将searchString定义为数组，并将v-model用作v-model=searchString[index]。这是工作代码

新Vue{ 组件：{}， el:commonNameDiv， 资料{ 返回{ 搜索字符串：['']， 结果：[]， savedAttributes:[]， 卡片：[] } }, 方法：{ 自动完成{ 这个结果=[]； console.logthis.searchString； 如果this.searchString.length>2{ 获取“/product/parts/components/search”{ 参数：{ searchString:this.searchString } }.thenresponse=>{ this.results=response.data； console.logthis.results； console.logthis.searchString； }; } }, saveAttributeresult{ this.savedAttributes=[]； console.log'cool'； this.savedAttributes.pushresult.attribute_值； log‘这里是属性’； console.logthis.savedAttributes； this.searchString=result.attribute_值； 这个结果=[]； }, addCard：函数{ 这个。卡。推{ 索引： } } } } @{{result.attribute_value}} 添加另一个区域 将searchString定义为数组，并将v-model用作v-model=searchString[index]。这是工作代码

新Vue{ 组件：{}， el:commonNameDiv， 资料{ 返回{ 搜索字符串：['']， 结果：[]， savedAttributes:[]， 卡片：[] } }, 方法：{ 自动完成{ 这个结果=[]； console.logthis.searchString； 如果this.searchString.length>2{ 获取“/product/parts/components/search”{ 参数：{ searchString:this.searchString } }.thenresponse=>{ this.results=response.data； console.logthis.results； console.logthis.searchString； }; } }, saveAttributeresult{ this.savedAttributes=[]； console.log'cool'； this.savedAttributes.pushresult.attribute_值； log‘这里是属性’； console.logthis.savedAttributes； this.searchString=result.attribute_值； 这个结果=[]； }, addCard：函数{ 这个。卡。推{ 索引： } } } } @{{result.attribute_value}} 添加另一个区域 新Vue{ 组件：{}， el:commonNameDiv， 资料{ 返回{ 搜索字符串：[]， 结果：[]， savedAttributes:[]， 卡片：[] } }, 方法：{ 自动完成索引{ 这个结果=[]； console.logthis.searchString[index]； 如果此.searchString[index].length>2{ 这一结果=[{ 属性值：苹果 }, { 属性值：banane } ] } }, saveAttributeresult{ this.savedAttributes=[]； console.log'cool'； this.savedAttributes.pushresult.attribute_值； log‘这里是属性’； console.logthis.savedAttributes； this.searchString=result.attribute_值； 这个结果=[]； }, addCard：函数{ 这个。卡。推{ 索引： } } } } @{{result.attribute_value}} 添加另一个区域 新Vue{ 组件：{}， el:commonNameDiv， 资料{ 返回{ 搜索字符串：[]， 结果：[]， savedAttributes:[]， 卡片：[] } }, 方法：{ 自动完成索引{ 这个结果=[]； console.logthis.searchString[index]； 如果此.searchString[index].length>2{ 这一结果=[{ 属性值：苹果 }, { 属性值：banane } ] } }, saveAttributeresult{ this.savedAttributes=[]； console.log'cool'； this.savedAttributes.pushresult.attribute_值； log‘这里是属性’； console.logthis.savedAttributes； this.searchString=result.attribute_值； 这个结果=[]； }, addCard：函数{ 这个。卡。推{ 索引： } } } } @{{result.attribute_value}} 添加另一个区域

---

---

感谢您的支持，它在这些方面确实有效，但我的autocomplete函数现在抛出的错误属性或方法索引不是在实例上定义的，而是在呈现过程中引用的，在axios调用失败之前，可以通过在数据中定义searchString:[]轻松解决。我希望它能起作用。你能检查一下我在上面的问题中添加的片段吗？我通过了它，但它仍然使用我的输入搜索的第一个字母填充下一个输入，然后它会影响两个下拉列表。它只是在两个位置使用seachString（有索引和无索引）时有点油嘴滑舌。所以问题出现了我在两个方面都有，并且遇到了第一个问题，但是现在我在两个方面都有了，并且按照你说的方式设置了searchString，但是它给了我一个索引未定义的问题再次感谢你，在这些术语中它确实起作用，但我的autocomplete函数现在抛出的错误属性或方法索引不是在实例上定义的，而是在呈现过程中引用的，在axios调用失败之前，可以通过在数据中定义searchString:[]轻松解决。我希望它能起作用。你能检查一下我在上面的问题中添加的片段吗？我通过了它，但它仍然使用我的输入搜索的第一个字母填充下一个输入，然后它会影响两个下拉列表。它只是在两个位置使用seachString（有索引和无索引）时有点油嘴滑舌。所以问题出现了好吧，我在两个方面都做了，并且遇到了第一个问题，但是现在我在两个方面都做了，并且按照你说的方式设置了searchString，但是它又给了我一个未定义索引的问题谢谢你，它似乎在克隆元素中工作，输入有自己的搜索，但它仍然会影响结果，因此，当我在任何输入中搜索所有dev元素populatesThank you for this时，它似乎在克隆元素中工作，输入有自己的搜索，但仍然会影响结果，因此，当我搜索任何输入时，所有dev元素的下拉列表都会出现。我想我看到了您所做的更改，但它仍然会在输入上出现问题，现在根本不允许选择。如果我选择Apple，它把“A”放在第一个输入中，把“P”放在第二个输入中。如果你把它作为一个组件，那就最好了。它会独立工作。我想我看到了你所做的更改，但它在输入中仍然有小故障，现在根本不允许选择。如果我选择苹果，它把“A”放在第一个输入中，把“P”放在第二个输入中。如果你把它做成一个组件，那就最好了。它可以独立工作