如何从 Getnote.vue 中存在的 notes[] 数组中获取 id 并基于该 ID 如何更新特定卡？

Posted 2023-02-22

【中文标题】如何从 Getnote.vue 中存在的 notes[] 数组中获取 id 并基于该 ID 如何更新特定卡？

【英文标题】：how to get id from notes[] array present inside Getnote.vue and based on that ID how to update a particular card?

【发布时间】：2021-09-03 17:46:55

【问题描述】：

我的仪表板中有一些卡片，在仪表板中我得到了一些卡片，其中包含卡片的标题和描述，这些卡片是我从后端 (axios.js) 获取的。我正在获取的显示部分，但在我的如果我想更新特定卡，当我单击任何卡时，更新弹出卡即将到来。当我点击任何卡片时，它会打开弹出卡片，此卡片的目的是根据卡片 ID（存储在 Getnote.vue 中的 notes[] 数组中的卡片详细信息）更新内容，这里我的问题是如何获取特定的卡片 ID用户点击卡片以及如何将这个东西连接到后端 Api 以更新特定的笔记。请帮我解决这个问题

Updatenote.vue

<template>
<div class="updatecard-notes">
    <form class="updatecard-container" @submit.prevent="handleSubmit" id="update-id">
        <input name="title" id="name-in" v-model="title" placeholder="Title" autocomplete="off" />
        <textarea name="content" id="text-in" v-model="description" placeholder="Take a note..." autocomplete="off"></textarea>
        <Icon />
        <button @click="updateNotes()" type="submit">Close</button>
    </form>
</div>
</template>

<script>
import service from '../../service/User'
import Icon from '../../components/pages/Icon.vue'
export default 
    name: 'Updatenote',
    components: 
        Icon
    ,
    data() 
        return 
            id:'',
            title:'',
            description:''
        
    ,
    methods: 
        updateNotes: function() 
            const updateData =
                id:this.id,
                title:this.title,
                description:this.description
            ;
            service.userUpdateNote(updateData).then(response => 
                console.log("update",response);
                localStorage.setItem('token',response.data.token);
                this.notes.push(...response.data);
            )
        ,
    

</script>

<style scoped>
.updatecard-container 
    /* width: 100px; */
    padding: 4px 10px;
    font-size: 1rem;
    /* margin-left: 200px; */
    margin-bottom: -200px;
    margin-top: -160px;
    position: fixed;
    width: 620px;
    height: 150px;
    box-shadow: 5px 5px 10px #e0dede;
    /* margin-left: 731px; */
    font-family: 'Times New Roman', Times, serif;


form textarea 
    width: 100%;
    border: none;
    padding: 0px 10px;
    outline: none;
    font-size: 1rem;
    resize: none;


form input 
    width: 90%;
    border: none;
    padding: 4px 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-top: 2px;
    font-size: 1.1rem;


form button 
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 25px;
    bottom: 10px;
    background: white;
    color: rgb(0, 0, 0);
    border: none;
    width: 50px;
    height: 36px;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: 'Times New Roman', Times, serif;

</style>

User.js

import AxiosService from '../service/axios';
const axios = new AxiosService()
export default
    userRegister(data)
        return axios.postData('/register', data);
    ,
    userLogin(data)
        return axios.postData("/login",data);
    ,
    userForgotPassword(data)
        return axios.postData("/auth/sendPasswordResetLink",data);
    ,
    userResetPassword(data)
        return axios.postData("/auth/resetPassword",data);
    ,
    userCreateNote(data)
        return axios.postData("/notes",data);
    ,
    userGetNote()
        return axios.getData("/notes");
    ,
    userUpdateNote(id, data)
        console.log("ID: ",id);
        return axios.putData(`/notes/$id`, data);
    

axios.js

import axios from 'axios'

axios.defaults.baseURL=process.env.VUE_APP_ROOT_URL
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');


export default class AxiosService

    postData(url, data)
        return axios.post(url, data).then(response =>
            return response;
        ).catch(error=>
            return error;
        )
    

    getData(url)
        return axios.get(url).then(response =>
            return response;
        ).catch(error=>
            return error;
        )
    

    putData(url, data)
        return axios.put(url, data).then(response=>
            return response;
        ).catch(error=>
            return error;
        )
    

Getnotes.vue

<template>
<div class="carddisplay-notes">
    <div class="carddisplay-container" v-for="note in notes" :key="note.data">
        <div class="carddisplay" @click="togglePopup()">
            <h3>note.title</h3>
            <p>note.description</p>
        </div>
        <div class="carddisplay-icons">
            <Icon />
            <button class="card-button" type="button" v-if="flag" @click="handleSubmit();ToggleButton();">Close</button>
        </div>
    </div>
    <div class="cardupdate-popup" id="popup">
        <Updatenote />
    </div>
</div>
</template>

<script>
import service from '../../service/User'
import Icon from '../../components/pages/Icon.vue'
import Updatenote from '../../components/pages/Updatenote.vue'
export default 
    name: 'Getnote',
    components: 
        Icon, Updatenote
    ,
    data() 
        return 
            flag: true,
            notes:[
                id:1,
                title: 'notes',
                description: 'display notes'
            ,],
        
    ,
    methods: 
        ToggleButton()
            this.flag = !this.flag;
        ,
        async handleSubmit() 
            service.userGetNote().then(response => 
                this.notes.push(...response.data);
            )
        ,
        togglePopup()
            var popup=document.getElementById('popup');
            popup.classList.toggle('active');
        
    

</script>

<style lang="scss" scoped>
@import "@/SCSS/Getnote.scss";
</style>

【问题讨论】：

你好，在方法中传入note.id，然后处理进去更新卡。

您好，@YashMaheshwari，实际上在哪里以及如何编写 note.id.. 请告诉我。

你的问题比较混乱，如果用户想更新购物车信息，就会显示UpdateNote，对吧？如果是这样，则将 note.id 作为 prop 传递给 updateCard，然后使用该 id 发出 axios 请求。

您好，感谢@YashMaheshwari 提供的信息，但是如何传递 note.id 属性以及如何使用该属性来请求 axios

【参考方案1】：

在GetNotes.vue的data选项中创建一个属性，它将使用id跟踪当前点击的卡片，然后将该id传递给UpdateNote组件。

GetNotes.vue

<template>
<div class="carddisplay-notes">
    <div class="carddisplay-container" v-for="note in notes" :key="note.id">
        <div class="carddisplay" @click="togglePopup(note.id)">
            <h3>note.title</h3>
            <p>note.description</p>
        </div>
        <div class="carddisplay-icons">
            <Icon />
            <button class="card-button" type="button" v-if="flag" @click="handleSubmit();ToggleButton();">Close</button>
        </div>
    </div>
    <div class="cardupdate-popup" id="popup">
        <Updatenote :cardId="clickedCard"/>
    </div>
</div>
</template>

<script>
import service from '../../service/User'
import Icon from '../../components/pages/Icon.vue'
import Updatenote from '../../components/pages/Updatenote.vue'
export default 
    name: 'Getnote',
    components: 
        Icon, Updatenote
    ,
    data() 
        return 
            flag: true,
            notes:[
                id:1,
                title: 'notes',
                description: 'display notes'
            ,],
            clickedCard: '',
        
    ,
    methods: 
        ToggleButton()
            this.flag = !this.flag;
        ,
        async handleSubmit() 
            service.userGetNote().then(response => 
                this.notes.push(...response.data);
            )
        ,
        togglePopup(id)
            var popup=document.getElementById('popup');
            popup.classList.toggle('active');
            this.clickedCard = id;
        
    

</script>

<style lang="scss" scoped>
@import "@/SCSS/Getnote.scss";
</style>

在 Updatenote 组件中，使用该 id 进行 api 调用。这里cardId将包含当前点击卡片的id。

Updatenote.vue

<template>
<div class="updatecard-notes">
    <form class="updatecard-container" @submit.prevent="handleSubmit" id="update-id">
        <input name="title" id="name-in" v-model="title" placeholder="Title" autocomplete="off" />
        <textarea name="content" id="text-in" v-model="description" placeholder="Take a note..." autocomplete="off"></textarea>
        <Icon />
        <button @click="updateNotes()" type="submit">Close</button>
    </form>
</div>
</template>

<script>
import service from '../../service/User'
import Icon from '../../components/pages/Icon.vue'
export default 
    name: 'Updatenote',
    components: 
        Icon
    ,
    props: ['cardId'],
    data() 
        return 
            title:'',
            description:''
        
    ,
    methods: 
        updateNotes: function() 
            const updateData =
                id:this.cardId,
                title:this.title,
                description:this.description
            ;
            service.userUpdateNote(updateData).then(response => 
                console.log("update",response);
                localStorage.setItem('token',response.data.token);
                this.notes.push(...response.data);
            )
        ,
    

</script>

<style scoped>
...........
</style>