0

在我的仪表板中，我正在显示带有一些内容（标题和正文）的卡片，并且数据来自后端 api，并且该数据存储在 DisplayNotes.vue 中存在的 notes[] 数组中，并且每张卡片都包含一些图标，如果用户点击任何卡片TRASH 图标（例如：第 4 张卡片删除图标），特定 clickedTrashIcon 卡片数据应传递给 DeleteNote.vue 组件，并将数据存储在 DeleteNote 内部名为 Trash 的数组中。 vue 组件，请帮我解决这个问题

DeleteNote.vue

<template>
<div class="Trash-section">
    <div v-for="item in Trash" :key="item.id" class="container note">
        <div class="delete-content">
            <h5>{{item.title}}</h5>
            <p>{{item.body}}</p>

            <div class="icons Trash-icons">
                <i class="fas fa-trash"></i>
                <i class="fas fa-trash-restore"></i>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'DeleteNote',
    data() {
        return {
            Trash: [{
                    id: 1,
                    title: 'Fundoo',
                    body: 'Trash component'
                },
                {
                    id: 2,
                    title: 'second',
                    body: 'trash'
                },
                {
                    id: 2,
                    title: 'second',
                    body: 'trash'
                },
                {
                    id: 2,
                    title: 'second',
                    body: 'trash'
                },
                {
                    id: 2,
                    title: 'second',
                    body: 'trash'
                },

            ]
        }
    }
}
</script>

<style scoped>
.icons {
    margin-top: 12.2%;
    margin-left: 5%;
    opacity: 0.9;
}

.icons .fa-trash-restore {
    padding-left: 25px;
}

.icons .fa-trash:hover {
    font-size: 20px;
    cursor: pointer;
}

.Trash-section {
    margin-top: 5%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: space-around;
    gap: 10px;
}

.container {
    width: 22%;
    margin-top: 5%;
    margin-left: 18%;
    margin-right: -15%;
    box-shadow: 5px 5px 10px #e0dede;
    float: left;
}

.container:hover {
    box-shadow: 6px 6px 10px rgb(199, 199, 199);
}

h5 {
    font-size: 20px;
    font-weight: 400;
    font-family: 'Times New Roman', Times, serif;
    padding-left: 10px;
}

p {
    font-size: 18px;
    width: 90%;
    height: 60px;
    font-family: 'Times New Roman', Times, serif;
    width: 100%;
    padding: 7.5px 10px;
}

.Trash-icons {
    visibility: hidden;
}

.note:hover .Trash-icons {
    visibility: visible;
}
</style>

DisplayNotes.vue

<template>
<div class="carddisplay-section">
    <div v-for="note in notes" :key="note.id" id="blur" class="container note">
        <div @click="toggle(note.id)" class="card-content">
            <h5>{{note.title}}</h5>
            <p>{{note.body}}</p>
        </div>
        <div class="import-icons">
            <icons class="imported-icons note-icons" />
            <button v-if="flag" class="card-button" type="button" @click="handlesubmit();Togglebtn();">Close</button>
        </div>
    </div>
    <div id="popup">
        <UpdateNotes :cardId="clickedCard" :cardContent="cardContent" />
    </div>
</div>
</template>

<script>
import service from '../service/User'
import icons from './icons'
import UpdateNotes from './UpdateNotes.vue'
export default {
    name: 'DisplayNotes',
    components: {
        icons,
        UpdateNotes
    },
    data() {
        return {
            flag: true,
            notes: [{
                id: 1,
                title: 'Fundoo',
                body: 'unlimited notes..'
            }, ],
            clickedCard: '',
            cardContent: {},
        }
    },
    methods: {
        Togglebtn() {
            this.flag = !this.flag;
        },
        async handlesubmit() {
            service.userDisplayNotes().then(response => {
                this.notes.push(...response.data);
            })
        },
        toggle(id) {
            var blur = document.getElementById('blur');
            blur.classList.toggle('active');
            this.clickedCard = id;
            // this.card.content = this.notes.filter((note) => note.id === id);
            var popup = document.getElementById('popup');
            popup.classList.toggle('active');
        },
    }
}
</script>

<style lang="scss">
@import "@/styles/DisplayNotes.scss";
</style>

icons.vue

<template>
<div class="footer">
    <i class="fas fa-bell"></i>
    <i class="fas fa-user"></i>
    <i class="fas fa-palette"></i>
    <i clss="fas fa-image"></i>
    <i class="fas fa-archive"></i>
    <!-- <i class="fas fa-ellipsis-v"></i> -->
      <i class="fas fa-trash"></i>
</div>
</template>

<style scoped>
.footer i {
    opacity: 0.9;
    position: relative;
}

.footer .fa-bell {
    margin-top: 5px;
    margin-left: 10px;
}

.footer .fa-user {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-palette {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-image {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-archive {
    margin-top: 5px;
    margin-left: 40px;
}

/* .footer .fa-ellipsis-v {
    margin-top: 5px;
    margin-left: 40px;
} */
.footer .fa-trash {
    margin-top: 5px;
    margin-left: 40px;
    cursor:pointer;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
// import 'bootstrap/dist/css/bootstrap.min.css'
// import '@/assets/css/main.css'

//vuelidate
import vuelidate from 'vuelidate'
import 'bootstrap/dist/css/bootstrap.min.css'

import router from './router'
import './service/axios'
import store from './store';

// import ('./src/Styles/Forget.css')
Vue.config.productionTip = false

Vue.use(vuelidate)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
4

1 回答 1

1

您应该使用 Vuex 进行中央状态管理。工作流程应该是这样的：您通过 api 从后端获取数据，并将它们存储在 DisplayNotes.vue 组件中的数组中并显示它们。然后单击卡片中的垃圾桶图标并从数组中的项目中获取该值。您必须通过 vuex 中的“Actions”和“Mutations”将“已删除项目”值存储在 vuex 状态变量中。例如“已删除项目”。成功完成后，您可以使用“Getters”从应用程序中每个组件的 vuex 存储“deletedItems”中创建的变量中获取值。

这是一个简单的例子。首先安装vuex并导入它们。

npm i vuex

在应用程序的根文件夹中创建 store.js 文件。

在您的 app.js 或 main.js 等中，您必须导入 store.js 文件

import store from './store';

const app = new Vue({
    el: '#app',
    store,
    render: r => r(App)
});

把它放在你的文件 store.js 中

import Vuex from 'vuex'
import Vue from 'vue'
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage,
  })],
  state: {
    deletedItems: [],
  },
  getters: {
    deletedItems: state => {
      return state.deletedItems
    },
  },
  mutations: {
    SET_DELETED_ITEMS(state, value) {
      return state.deletedItems = value
    },
  },
  actions: {
    setDeletedItems({ commit }, value) {
      commit('SET_DELETED_ITEMS', value);
    },
  },
});

要将值设置为变量：将其放入 vue 组件“DisplayNotes.vue

methods: {
   deleteItem(){
     this.$store.dispatch("setDeletedItems", itemValues);
   }
}

要从 vuex 获取值：把它放在你的“DeletedNotes.vue”中

import { mapState } from "vuex";

computed: {
    ...mapState(["deletedItems"]),
  }

你可以像这样使用它们：

console.log(this.deletedItems)

有关更多信息，请查看：https ://vuex.vuejs.org/

于 2021-06-21T13:49:45.287 回答