删除我在Vue.js中通过ul中的删除按钮组件和过滤器功能点击的项目

mzillmmw  于 7个月前  发布在  Vue.js
关注(0)|答案(1)|浏览(59)

我有一个关于Vue的问题。我尝试了很多东西，我发现，但我不能删除我的元素。也尝试了一个聊天GPT，如果他会有帮助，但答案是不，它不是。
这是我的家庭视图。
//路由组件的主视图

<template>
    <main class="appMain">
      <Addtodo @addtodo="todos.push($event)"></Addtodo>
      <div class="todo-wrapper">
        <ul class="todo-list">
          <TodoItem v-for="(todo, index) in todos" 
          :key="todo.id"
          :index="index"
          :todo="todo"
          :todos="todos"></TodoItem>
        </ul>
      </div>
    </main>
</template>

<script>

import Addtodo from '../components/AddTodo.vue'
import TodoItem from '../components/TodoItem.vue'

export default {
  emits: {
    title: {
      type: String,
    },
    text: {
      type: String,
    },
    date: {
      type: String,
    },
    time: {
      type: String,
    },
    todos: {
      type: Array,
    }
  },
  data() {
    return {
      title: '',
      text: '',
      date: '',
      time: '',
      todos: [],
    }
  },
  computed: {
    filteredTodos() {
      const filterStatus = this.$route.params.filterStatus;
      if (filterStatus === 'all') {
        return this.todos; // Use your todo data here
      } else {
        return this.todos.filter((todo) =>
          filterStatus === 'done' ? todo.isDone : !todo.isDone
        );
      }
    },
  },
  components: {
    Addtodo,
    TodoItem,
  },
}
</script>

<style>

.todo-section {
  width: 100%;
  list-style: none;
}

.appMain {
  grid-area: main;
  margin-top: 2em;
}

.todo-wrapper {
  width: 90%;
}

.todo-list {
    width: 100%;
    list-style: none;
}

</style>

字符串
这里是我的待办事项文件

<template>
    <li :id="index" class="todo-item-wrapper" :class="{ done: isDone }">
        <div class="todo-item">
            <h2 class="todo-title"> {{ todo.todos.title }} </h2>
            <article class="todo-text"> {{ todo.todos.text }} </article>
            <p class="todo-date"> 
                {{ todo.todos.date | moment }} 
                <span> &nbsp; / &nbsp; </span> 
                {{ todo.todos.time }} 
            </p>
        </div>
        <EditButton :id="index" :isDone="isDone" @updateIsDone="isDone = $event" @deleteItem="deleteControl"/>
    </li>
</template>

<script>
import moment from 'moment';
import EditButton from '../components/EditButton.vue';

export default {
    props: {
        title: {
            type: String,
        },
        text: {
            type: String,
        },
        date: {
            type: String,
        },
        time: {
            type: String,
        },
        todo: {
            type: Object,
        },
        /*todos: {
            type: Array,
        },*/
        index: {
            type: Number,
        }
    },
    data() {
        return {
            isDone: false,
            todos: [],
        };
    },
    filters: {
        moment: function (date) {
            return moment(date).format('Do MMMM YYYY');
        }
    },
    methods: {
            deleteControl() {
        
        }
    },
    components: {
        EditButton,
    }
}
</script>

<style lang="scss">
@import '../assets/fonts.scss';
@import '../assets/variables.scss';

.todo-item-wrapper {
    display: flex;
    width: 100%;
}

.todo-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #efefef;
    border-radius: 11px;
    box-shadow: 1px 4px 4px 1px $sandShadow;
    margin: 0.4em 0.2em 0.4em 0.2em;
    z-index: 1;
}

.todo-item:hover {
    transform: scale(1.05);
    transition: .25s ease;
}

.todo-title {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: $sand;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.todo-text {
    display: flex;
    justify-content: flex-start;
    padding: 0em 0.5em 0em 1em;
}

.todo-date {
    display: flex;
    justify-content: flex-end;
    padding: 0em 0.5em 0em 1em;
}

.done {
    opacity: 0.8;
    z-index: 1;
}

.done > .todo-item > .todo-title,
.done > .todo-item > .todo-text,
.done > .todo-item > .todo-date {
    text-decoration: line-through;
}

</style>

型
我的编辑按钮文件
<

template>
    <div :id="index" class="body-btn">
        <div class="list-container" :class="{ active: isActive }">
            <button class="more-button" aria-label="Menu Button" @click="openEdit">
                <div class="menu-icon-wrapper">
                <div class="menu-icon-line half first"></div>
                <div class="menu-icon-line"></div>
                <div class="menu-icon-line half last"></div>
                </div>
            </button>
            <ul class="more-button-list">
                <li class="more-button-list-item" @click="makeDone">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="480" height="480" viewBox="0 0 30 30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
                    <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
                </svg>
                <span>Done</span>
                </li>
                <li class="more-button-list-item" @click="deleteItem">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
                    <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6"/>
                </svg>
                <span>Delete</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isActive: false,
            isDone: false,
        };
    },
    methods: {
        openEdit() {
            this.isActive = !this.isActive;
        },
        makeDone() {
            this.isDone = !this.isDone;
            this.$emit('updateIsDone', this.isDone);
        },
        deleteItem() {
            this.$emit('deleteItem');
        }
    }
}

</script>

<style lang="scss">
@import '../assets/fonts.scss';
@import '../assets/variables.scss';

$menu-icon-transition: transform 300ms cubic-bezier(0.52, -0.80, 0.52, 0.52);

.body-btn {
    height: 99.2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 1.5em;
    font-family: 'Montserrat', sans-serif;
}

.list-container {
    position: relative;

    &.active {
        .more-button-list {
            opacity: 1;
            transform: scale(1);
        }

        .more-button-list-item {
            animation: fadeInItem .6s .2s forwards;

            &:nth-child(2) {
                animation-delay: .4s;
            }

            &:nth-child(3) {
                animation-delay: .6s;
            }

            &:nth-child(4) {
                animation-delay: .8s;
            }
        }

        .more-button {
            animation: onePulse .6s forwards linear;
        }

        .menu-icon-wrapper {
            transform: rotate(-45deg);
        }

        .menu-icon-line {
            &.first {
                transform: rotate(-90deg) translateX(1px);
            }

            &.last {
                transform: rotate(-90deg) translateX(-1px);
            }
        }
    }
}

.more-button {
    background-color: $button-bg;
    box-shadow: 1px 4px 4px 1px $sandShadow;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: .2s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    z-index: 2;

    &:hover,
    &:focus {
        box-shadow: 1px 4px 4px 1px $sandShadow;
        background-color: darken($button-bg, 4%);
    }

    &:hover {
        transform: scale(1.1);
        transition: $menu-icon-transition;
    }

    &:focus {
        outline: 0;
    }

    &-list {
        background-color: $list-bg;
        border-radius: 8px;
        list-style-type: none;
        width: 140px;
        box-shadow: 1px 4px 4px 1px $sandShadow;
        padding: 0;
        padding: 6px;
        position: absolute;
        right: -130px;
        bottom: 1em;
        opacity: 0;
        z-index: 1;
        transform: scale(0);
        transform-origin: bottom right;
        transition: all .3s ease .1s;

        li {
            opacity: 0;
        }
    }

    &-list-item {
        display: flex;
        align-items: center;
        color: $text-color;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        transition: .2s ease-in;
        transform: translatex(-10px);

        &:hover {
            color: $text-color-hover;
            background: $sand;
        }

        &:after {
            content: '';
            position: absolute;
            height: 1px;
            width: calc(100% - 24px);
            left: 12px;
            bottom: 0;
            background-color: rgba(132, 160, 244, 0.1);
        }

        &:last-child:after {
            display: none;
        }

        svg {
            width: 18px;
            height: 18px;
        }

        span {
            display: inline-block;
            line-height: 20px;
            font-size: 14px;
            margin-left: 8px;
        }
    }
}

@keyframes onePulse {
    0% {
        box-shadow: 1px 4px 4px 1px $sandShadowMore;
    }

    50% {
        box-shadow: 1px 4px 4px 1px $sandShadow;
    }

    100% {
        box-shadow: 1px 4px 4px 1px $sandShadowMore;
    }
}

@keyframes fadeInItem {
    100% {
        transform: translatex(0px);
        opacity: 1;
    }
}

.menu-icon-wrapper {
    border-radius: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 330ms ease-out;
}

.menu-icon-line {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 2px;

    &.half {
        width: 50%;
    }

    &.first {
        transition: $menu-icon-transition;
        transform-origin: right;
    }

    &.last {
        align-self: flex-end;
        transition: $menu-icon-transition;
        transform-origin: left;
    }
}

</style>

型
还有我的汉堡菜单，当然是在app.vue中添加的，而不是在homeview.vue中

//hamburger menu component
<template>
<div class="hamNav">
    <div class="ham-wrapper">
        <b-button v-b-toggle.sidebar-1 class="hamBtn">
            <img src="../assets/icons8-menu.svg" class="hamIcon">
        </b-button>
    </div>
    <b-sidebar id="sidebar-1" title="Navigation" shadow>
            <ul class="navig">
                <li class="nav-item"><router-link to="/">My day</router-link></li>
                <li class="nav-item"><router-link to="/important">Important</router-link></li>
                <li class="nav-item"><router-link to="/planned">Planned</router-link></li>
                <li class="nav-item"><router-link to="/tasks">Tasks</router-link></li>
                <li class="nav-item"><router-link to="/shoplist">Shop List</router-link></li>
            </ul>
    </b-sidebar>
    <div class="filter-wrapper">
        <b-dropdown id="filter" class="m-md-2" v-model="filterValue">
            <template #button-content>
                <i class="icon-wrapper">
                    <img src="../assets/filter.png" alt="filter" class="filter-icon">
                </i>
            </template>
            <b-dropdown-item-button @click="setFilter('all')" value="all" active>All</b-dropdown-item-button>
            <b-dropdown-item-button @click="setFilter('done')" value="done">Done</b-dropdown-item-button>
            <b-dropdown-item-button @click="setFilter('undone')" value="undone">Undone</b-dropdown-item-button>
        </b-dropdown>
</div>
</div>
</template>

<script>
export default {
    data() {
        return {
            filterValue: "all",
        }
    },
    methods: {
        setFilter(filterStatus) {
            this.$emit('filterChange', filterStatus);
        },
    },
}
</script>

<style lang="scss">
@import '../assets/fonts.scss';
@import '../assets/variables.scss';

.close {
    border: 1px solid $redder !important;
    background: $redder !important;
    border-radius: 25%;
    box-shadow: -1px 4px 3px 2px $sandDarker !important;

    &:hover {
        transform: scale(1.1);
        transition: .25s ease;
    }
}

.bi-x {
    width: 1.8em !important;
    height: 1.8em !important;
    fill: whitesmoke !important;
}

#sidebar-1 {
    background-color: $sand !important;
    z-index: 2;
}

.hamNav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1000;
}

.ham-wrapper {
    width: 30%;
    position: relative;
    top: 0.5em;
    left: 0.5em;
}

.hamBtn {
    margin: 1em !important;
    background-color: $sandDarker !important;
    border-radius: 15px !important;
    box-shadow: 1px 4px 4px 1px $sandShadow !important;
}

.hamIcon {
    width: 40%;
}

.btn-secondary.hamBtn {
    background: transparent;
    border: none;
}

.btn-secondary.hamBtn:hover {
    transform: scale(1.1);
    transition: .25s ease;
    background: transparent;
}

.navig {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav-item {
    width: 100%;
    text-align: center;
    padding-top: 0.5em;
}

a {
    font-weight: bold;
    color: $black;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;

    &.router-link-exact-active {
        color: $gold !important;
        border-top: 1px solid $sandDarker;
        border-bottom: 1px solid $sandDarker;
    }

    &:visited {
        color: $black;
    }

    &:hover {
        color: $cream;
        background: $sandDarker;
    }
}

.filter-wrapper {
    margin-right: 2em;
}

#filter {
    margin: 1em !important;
}

#filter__BV_toggle_ {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    background-color: $sandDarker !important;
    border-radius: 15px !important;
    box-shadow: 1px 4px 4px 1px $sandShadow !important;
}

.icon-wrapper {
    width: 10%;
}

.filter-icon {
    width: 30%;
}

.dropdown-menu > li {
    margin: 0.3em;
    border-bottom: 1px solid $grayTran;
}

.dropdown-item {
    padding-inline: 0 !important;
    padding: 0.3em !important;
    border-radius: 0.375em !important;

    &:hover {
        color: $text-color-hover !important;
        background: $sand !important;
        transition: 300ms cubic-bezier(0.52, -0.80, 0.52, 0.52);
    }
}

.dropdown-item.active, .dropdown-item:active {
    background-color: $sandDarker !important;
    color: $goldLight !important;
}

</style>

型
我还有一个addtodo文件，我在其中添加、发出和验证make。
我试过拼接，过滤，删除，但不会工作，我不知道为什么。当然，我发送组件之间的信息，但与不工作的代码，我删除了他们。
只需要过滤功能，将过滤我的项目类，如所有，完成，撤消和删除功能的项目，我点击。
如果有人知道答案，请告诉我，我还能做些什么，我的代码才能工作。
谢谢

vue.js

1条答案

按热度按时间
j0pj023g

j0pj023g1#

这是我的todolist代码，我用id删除项目。

模板

<template>
<div id="todo-list">
    <div id="new-todo-list-item" v-if="location !== 'archive'">
        <input type="text" id="new-todo-list-item-input" placeholder="Enter Todo list.." @keypress="isLetter" @keyup="updateText" v-model="newTodoItem">
        <input type="submit" id="new-todo-list-item-submit" value="Add To Do List Item" @click="newTodolist">
    </div>
    <div class="no-list" v-if="Object.keys(todos).length == 0" >No todo item.</div>
    <div class="list-item" v-for="item in todos" :key="item.id">
        <div class="list-item-holder" v-if="item.location == location" :data-status = "item.completed">
            <input type="checkbox" :data-id="item.id" :id="item.id" :checked="item.completed" @click="updateTodo" :data-status="item.completed"> 
                <label :data-id="item.id" :for="item.id">{{ item.name }}</label>
            <div class="delete-item" @click="deleteTodo" :data-id="item.id">Delete</div>
            <div class="archive-item" :data-id="item.id" v-if="item.location !== 'archive'" @click="moveTodoItem">Archive</div>
        </div>
    </div>
</div>

字符串

呼叫状态代码

deleteTodo(e) {
   this.$store.commit('deteteTodo', {
      id : e.currentTarget.dataset.id
   });
   this.$notify({ type: "success", text: "Deleted Successfullly." });
 }

型

JS代码

deteteTodo(state, todoItem) {
  let id = todoItem.id;

   state.todos.map((data, i) => {
     if (data.id == id) {
         state.todos.splice(i, 1);
      }
    });
  }

型

赞(0）分享  回复(0）举报  7个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com