[英]Delete repeat in vue.js
I have a button that when pressed adds words and saves them in local storage.
我有一个按钮,按下它会添加单词并将它们保存在本地存储中。 When pressed more than once, it adds the same words.
多次按下时,它会添加相同的词。 I want to delete repeated words What is the problem and what is the solution?
我想删除重复的单词 问题是什么,解决方法是什么?
code in this link: https://www.w3schools.com/code/tryit.asp?filename=GTS8415TXXGZ此链接中的代码: https://www.w3schools.com/code/tryit.asp?filename=GTS8415TXXGZ
<template>
<div id="app">
<section class="todo-wrapper">
<form @keydown.enter.prevent="">
<div v-bind:class="{ active: new_todo }" @click="addItem">+</div>
</form>
<div v-if="pending.length > 0">
<transition-group name="todo-item" tag="ul" class="todo-list">
<li v-for="(item, index) in pending" v-bind:key="index">
<span class="delete" @click="deleteItem(index)">
<span class="todo-text">{{ item.title }}</span></span
>
</li>
</transition-group>
</div>
<transition name="slide-fade">
<p class="status free" v-if="!pending.length">
<img src="empty.svg" alt="empty" />empty
</p>
</transition>
</section>
</div>
</template>
<script>
export default {
el: "#app",
data() {
return {
todoList: [],
new_todo: "",
showComplete: false,
showCanNotAdd: false,
};
},
computed: {},
mounted() {
localStorage.setItem("count", "one");
this.getTodos();
},
watch: {
todoList: {
handler: function (updatedList) {
localStorage.setItem("todo_list", JSON.stringify(updatedList));
},
deep: true,
},
},
computed: {
pending: function () {
return this.todoList.filter(function (item) {
return !item.done;
});
},
completed: function () {
return this.todoList.filter(function (item) {
return item.done;
});
},
completedPercentage: function () {
return (
Math.floor((this.completed.length / this.todoList.length) * 100) + "%"
);
},
today: function () {
var weekday = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = "0" + dd;
}
if (mm < 10) {
mm = "0" + mm;
}
today = {
day: weekday[today.getDay()],
date: mm + "-" + dd + "-" + yyyy,
};
return today;
},
},
methods: {
getTodos() {
if (localStorage.getItem("todo_list")) {
this.todoList = JSON.parse(localStorage.getItem("todo_list"));
}
},
addItem() {
if (condition) {
}
this.todoList.unshift({
id: this.todoList.length,
title: "click " + localStorage.getItem("count"),
done: false,
});
this.new_todo = "";
return true;
},
deleteItem(index) {
this.todoList.splice(index, 1);
},
},
};
</script>
try this out试试这个
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.