如何将数据从一个组件传递到另一个组件并将该数据存储到 vue.js 中的数组中？

Question

in my dashboard,i am displaying cards with some content(title & body)and the data is coming from backend api and that data is stores in notes[] array that is present inside the DisplayNotes.vue ,and each card contains some icons if the user clicks on any card TRASH-icon (for example: 4th card delete icon),the particular clickedTrashIcon card data should be passed to the DeleteNote.vue component and the data is stored inside the array called Trash which is present inside the DeleteNote.vue component ,please help me to fix this thing

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')


 

Answer 1

You should use Vuex for central state management. The workflow should be like this: you get the data from back-end via api and you store them in a array in your DisplayNotes.vue component and display them. Then you click on the trash icon in the card and get that values from your item from your array. You have to store "deleted item" values in vuex state variable via "Actions" and "Mutations" from vuex. For example "deletedItems". After you did it successfully, you can use "Getters" to get the values from your created variable in vuex store "deletedItems" in every component in your application.

Here is a quick example. Install vuex at first and import them.

npm i vuex

create store.js file in the root folder of your application.

in your app.js or main.js etc. you have to import store.js file

import store from './store';

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

put this in your file 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);
    },
  },
});

To set values into a variable: put this in vue component "DisplayNotes.vue

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

To get values from vuex: put this in your "DeletedNotes.vue"

import { mapState } from "vuex";

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

you can use them like:

console.log(this.deletedItems)

For more check this: https://vuex.vuejs.org/