Consider these two components in vue3.js

PostsComponent.vue

<template>
 <table>
   <template v-for="attributes in posts">
    <tr>
        <td>{{ attributes.attributes.title }}</td>
        <td>{{ attributes.attributes.post_content }}</td>
        <button type="button"  @click="editPost(attributes.id)">edit</button>
    </tr>
  </template>
 </table>

  <ModalComponent v-show="isModalVisible" @close="closeModal" />
 ...
</template>     

<script>
import ModalComponent from './ModalComponent.vue';

export default {
    components: {
        ModalComponent
    },
    data() {
        return {
            info: null,
            message: null,
            postTitle: "",
            postContent: "",
            postStatus: "",
            postCreatedAt: "",
            isModalVisible: false,
        }
    },
    methods: {
        showModal() {
            this.isModalVisible = true;
        },

        closeModal() {
            this.isModalVisible = false;
        },

        fetchData(id) {
          
            axios.get('http://127.0.0.1:8000/api/posts/'   id, {
                headers: {
                    Authorization: 'Bearer '   localStorage.getItem('apiToken')
                }
            })
            .then((response) => {
                console.log(response);
            }).catch((error) => {
               console.log(error);
            });

        },

        editPost(id) {
            this.isModalVisible = true;

            let response = this.fetchData(id);

            console.log(response); // works a charm
            
           // now send response data to ModalComponent from here, ready for editing?

        },

        deletePost(value) {
            console.log('delete post clicked', value);
        }
    },
    
    mounted() {
       // successfully got the response, loading the page with an array of posts
    }
}
</script>   

ModalComponent

<template>
    <transition name="modal-fade">
        <div >
            <div  role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDescription">
                <header  id="modalTitle">
                    <slot name="header">
                        This is the default title! 
                    </slot>
                    <button type="button"  @click="close" aria-label="Close modal">
                        x
                    </button>
                </header>
                <section  id="modalDescription">
                    <slot name="body">
                        This is the default body!
                    </slot>
                </section>
                <footer >
                    <slot name="footer">
                        This is the default footer!
                    </slot>
                    <button type="button"  @click="close" aria-label="Close modal">
                        Close Modal
                    </button>
                </footer>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'ModalComponent',
    methods: {
        close() {
            this.$emit('close');
        },
    },
};
</script>

The ModalComponent has <slots> defined, I'm told these are entirely reusable. I'm totally new to vue.js.

How do I pass data from the PostsComponent.vue to my ModalComponent.vue via the editPost(id) event handler once I've successfully grabbed all my response data?

My goal is to edit the content within the modal and then make another PUT request to an API backend to update the database with the new content.

CodePudding user response：

You can use props for passing data from parent to children https://vuejs.org/guide/components/props.html

PostComponents.vue

<template>
  // bind the child props with your data that will be passed
  <ModalComponent v-show="isModalVisible" @close="closeModal" :dataFromParent='dataFromApi' />
</template>     


data() {
    return {
       // define data that will be passed to children
       dataFromApi: '',
   }
},

ModalComponents

<script>
export default {
  props: {
    // define name and type of the props
    dataFromParent: Object,
  }
};

// you can access the props object
console.log(props.dataFromParent)
</script>

after the props already setup, you need to insert some data to the data that will be passed to children, so when the editPost function already done fetching data, insert that response data to the variable that will be passed to children