vue 判断选择的标签id有没有在某个数组中,有的话就提示已存在,没有的话就正常添加
时间: 2024-09-12 20:08:00 浏览: 33
在Vue中,你可以使用计算属性(computed properties)或者方法(methods)来判断一个标签的id是否已经存在于某个数组中。以下是一个简单的示例:
假设你有一个数组 `tags` 存储了已经选择的标签id,你想要在添加新标签之前判断其id是否已存在:
```javascript
<template>
<div>
<!-- 表单输入 -->
<input type="text" v-model="newTagId">
<button @click="addTag">添加标签</button>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['tag1', 'tag2'], // 已存在的标签id数组
newTagId: '' // 新标签的id
};
},
methods: {
addTag() {
// 判断newTagId是否在tags数组中
if (this.tags.indexOf(this.newTagId) !== -1) {
alert('标签已存在!');
} else {
// 如果不存在,则添加到数组中
this.tags.push(this.newTagId);
this.newTagId = ''; // 清空输入框
}
}
}
};
</script>
```
在上面的代码中,我们使用了`indexOf`方法来检查`newTagId`是否存在于`tags`数组中。如果`indexOf`返回的索引不是`-1`,则表示该id已经存在。如果不存在,我们通过`push`方法将新标签的id添加到数组中,并且在添加之后清空输入框。
阅读全文