[Vuejs]-Get specific object in array on button click

by

0👍

✅

found a way to do it, don’t know if it the right way but it works so…

when i click on the modify button i store the current post’s id in the local storage and then i do this.

updatePost() {
            const thisPostId = localStorage.getItem("ThisPostId")
            let formData = new FormData();
            formData.append("image", this.post.file);
            formData.append("content", this.post.content);
            axios.put('http://127.0.0.1:3000/api/post/' + thisPostId, formData,
                {
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem("token"),
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(response => {
                    this.posts = response.data;
                    this.getAllPost();
                    this.showModifyPost = false
                }).catch(e => {
                    console.log(e);
                }
                )
        },

0👍

Can you try this

export default {
created(){
    this.getAllPost()
},
data(){
    return{
        posts: [],
        post: {
            file: "",
            content: "",
        },
        showModal: false,
        showModifyPost: false,
        user: {
            firstname: "",
            lastname: "",
            _id: "",
        },
    }
},
methods:{
    getAllPost() {
        axios
            .get('http://127.0.0.1:3000/api/post')
            .then((response) => {
                console.log("getPosts", response.data);
                this.posts = response.data;
            }).catch(error => {
                console.log(error);
            })
    },
    updatePost(id) {
        //the find part
        const postToBeFound=this.posts.find((post)=>post._id===id)
        console.log(postToBeFound)
        const formData = new FormData();
        formData.append("image", postToBeFound.file);
        formData.append("content", postToBeFound.content);
        axios.put('http://127.0.0.1:3000/api/post/' + id, formData,
            {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("token"),
                    'Content-Type': 'application/json',
                },
            })
            .then(response => {
                console.log(response);
                location.reload("/accueil");
            }).catch(e => {
                console.log(e);
            }
            )
    }
}

}

Error is happening at

formData.append("image", this.post[1].file);
 formData.append("content", this.post[1].content);

since post is an object post[1] will give error. In my original answer also I made the fix

formData.append("image", postToBeFound.file);
formData.append("content", postToBeFound.content);

Leave a comment