Javascript 在vue中复制div和数组值时出现问题

我这里有一个90%工作的代码块。我的想法是，我有一个自动完成（通过axios在数据库上以类似的条件进行搜索，但我在这里简化了结果集）。当您键入输入时，它会在下拉列表中搜索并返回匹配结果。如果选择某个选项，它将用实际选定值替换输入中的搜索文本。然后，如果单击添加另一个分区，它将使用输入克隆div

问题是，当我创建另一个div并开始在输入中搜索时，它会出现故障，然后还会触发两个div上的下拉列表（如果添加两个以上的div，则会触发更多）。但它实际上不允许在新添加的区域中输入文本

如何解决这个问题，使每个分区都有自己的输入和结果下拉列表，以便在保存时发送对每个div具有不同值的内容

newvue({
组件：{}，
el:#commonNameDiv“，
数据（）{
返回{
搜索字符串：[]，
结果：[]，
savedAttributes:[]，
卡片：[]
}
},
方法：{
自动完成（）{
这个结果=[]；
console.log（this.searchString）；
如果（this.searchString.length>2）{
这一结果=[
{attribute_value:“apple”}，
{属性值：“banane”}
]
}
},
保存属性（结果）{
this.savedAttributes=[]；
console.log（'cool'）；
this.savedAttributes.push（result.attribute_值）；
log（'这里是属性'）；
console.log（this.savedAttributes）；
this.searchString=result.attribute_值；
这个结果=[]；
},
addCard:function（）{
这个。卡。推({
索引：“”
})
}
}
})

{{result.attribute_value}}




@{{result.attribute_value}}


添加另一个区域

您的所有变量和/或属性都必须是唯一的，但目前它们不是唯一的。在我看来，最简单的方法就是将所需的全部存储在您正在使用的

卡
对象中。完成后，您可以从阵列中提取所需的数据

模板中删除了第一个div，让我们将一个空的
卡
对象推送到数组中。我们的
卡
对象将如下所示：

{
  index: "",
  value: "" // the end value
  results: [] // the search results will be stored here
}

因此，在模板中，我们使用
值
作为输入的v模型，并显示
结果
，供用户选择其值。另外，我建议您在所有
v-for
迭代中使用
键。在这里我使用索引，但这真的不是那么有效！但无论如何，模板的精简版本如下所示：

<div v-for="(card, i) in cards" :key="i">
  <div>
    <input
      placeholder="what are you looking for?"
      v-model="card.value"
      v-on:keyup="autoComplete($event, card)"
    >
    <div v-if="card.results.length">
      <ul>
        <li v-for="(result, i) in card.results" :key="i">
          <a v-on:click="saveAttribute(result, card)">@{{ result.attribute_value }}</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div>
  <a v-on:click="addCard">Add another zone</a>
</div>

最后，如前所述，在生命周期挂钩中调用
addCard
。这里我使用创建的
：

created() {
  this.addCard();
}

哇，谢谢你给出了这个非常全面的答案！一个问题：您的模板代码显示的是辅助卡，而不是初始卡/div。我可以保持原样吗？换句话说，我希望页面加载在那里显示初始div，然后如果用户选择添加一个，则使用v-if循环添加更多。是的，我认为如果在页面渲染时最初将一张卡推送到数组中，则在用户进入页面时会立即显示，因此我根本不认为需要初始div，因为它们是相同的（？至少在快速浏览时看起来像它们一样）。没错，它们是。好的，那么我就确保它从数组中的一个开始。非常感谢！是的，只要确保在用户进入页面时调用
addCard（）
。非常欢迎您，很高兴我能提供帮助！：）
created() {
  this.addCard();
}