我想使用删除功能删除数组中的特定对象。
我尝试了该splice()方法，但是无论我单击哪个对象，它都只会删除第一个数组
这是使用v-for方法的对象的代码
<li v-for=" skill in skills" :key="skill.id">
{{skill.skill}}
<i class="fa fa-minus-circle v-on:click="remove(skill)"></i>
</li>
这是Skill.vue
<script>
import uuid from "uuid";
export default {
name: "Skills",
data() {
return {
skill: "",
skills: [
{ id: uuid.v4(), skill: "Vue.js" },
{
id: uuid.v4(),
skill: "Javascript"
},
{
id: uuid.v4(),
skill: "Rails"
}
]
};
},
methods: {
addSkill() {
this.$validator.validateAll().then(result => {
if (result) {
this.skills.push({ skill: this.skill, id: uuid.v4() });
this.skill = "";
}
});
},
remove(id) {
this.skills.splice(id, 1);
}
}
};
我该如何构造方法
remove(id) {
this.skills.splice(id, 1);
}
删除特定对象？
要使用它，splice()您应该将项目的索引作为参数传递。要删除基于属性的项目，请考虑使用filter()代替。
模板应为：
<li v-for="skills in skill" :key="skill.id">
{{skill.skill}}
<i class="fa fa-minus-circle v-on:click="remove(skill.id)"></i>
</li>
和方法：
remove(id) {
this.skills = this.skills.filter(skill => skill.id !== id);
}
它将返回数组的副本，其中不包含skill.id !== id计算结果为的项目false。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句