多个标签使用同一个事件函数报错
问题可能是因为第一个
<div>元素调用getSearch方法时只提供了一个参数(value),而该方法期望三个参数(item、e和index)。看起来第一个<div>没有提供必要的参数,导致错误。
1.元素需要调用事件方法函数中一样多的参数
<---错误前--->
<div @click="getSearch(value)">搜索</div>
<---修改后--->
<div @click="getSearch(value, $event, 0)">搜索</div>
<div class="box" v-if="list">
<div
class="item"
v-for="(item, index) in list"
:key="item"
@click="getSearch(item, $event, index)"
>
{{ item }}
<span class="close">X</span>
</div>
2.方法
methods: {
//事件函数需要接收3个参数
getSearch (item, e, index) {
if (e.target.tagName === 'SPAN') {
console.log(index)
this.list.splice(index, 1)
this.$store.commit('user/setsearchInfo', this.list)
} else {
// 处理搜索关键词顺序
// 1.获取搜素关键词数组下标
const index = this.list.indexOf(item)
// 2.判断是否存在数组下标
if (index !== -1) {
// 3.存在则删除原来的数组下标数据
this.list.splice(index, 1)
// 4.将搜素框里的关键词放在数组的第一项
this.list.unshift(item)
// 存本地持久化
this.$store.commit('user/setsearchInfo', this.list)
} else {
// 5.如果关键词不存在数组下标,则直接放在数组第一项
this.list.unshift(item)
this.$store.commit('user/setsearchInfo', this.list)
}
this.$router.push(`/SearchList?search=${item}`)
}
},
1175

被折叠的 条评论
为什么被折叠?



