javascript - 如何在 vue.js 中使用基于特定 card-id 的 PUT 方法？

问题描述

在我的仪表板中，它会显示一些包含数据的卡片，并且显示为卡片（这些卡片包含来自后端 api 的数据，并在绑定之前绑定到卡片，然后将其存储到名为 notes[] 的数组中），如果我单击任何特定的显示的卡它应该打开一个弹出窗口它被称为基于它打开的 id 的更新卡但我无法将 uppdateNote.vue 连接到后端 api（PUT 方法），并且我的 updateNote 是基于特定卡的 id 工作的[这是我的 put 方法的 api-url http://localhost:8000/api/updateNote/{id}] 有点困惑如何将特定点击的卡片 id 传递给 updateNote url id，请帮我解决这个问题 [ url命中不正确它显示一些不同的 id，我的命中 api url 输出] 1

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"/>
    </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:'',
        }
    },
    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;

            var popup=document.getElementById('popup');
            popup.classList.toggle('active');

        },
        // myIndex(){
        //     document.getElementById('blur').innerHTML=this.notes.findIndex();
        // }

    }
}
</script>

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

UpdateNotes.vue

<template>
 <div  class="update" >
        <form class="update-note" @submit.prevent="handlesubmit" autocomplete="off">
            <input name="title"  v-model="title" placeholder="Title" />
            <textarea name="content" v-model="body" style="resize: none" placeholder="Take a note..." rows="3"></textarea>
            <div class="btm-icons">
                <icons />
                <button id="btn-section"  type="submit" @click="handlesubmit" >Close</button>
            </div>
        </form>
    </div>
</template>
<script>
import icons from './icons.vue'
import service from '../service/User'
export default{
    components:{icons},
    props: ['cardId'],
     data() {
        return {
            title:'',
            body:''
        }
    },
    methods:{
     async handlesubmit(){
       let userData={
id:this.cardId,
title:this.title,
body:this.body
       }
        service.userUpdateNotes(userData).then(response => {
         localStorage.getItem('token', response.data.token);  
               alert("Note updated  successfully");
               return response;
            })
     }
    }
}

</script>
<style scoped>
.update {
  padding-top: 0%;
  
}

.update-note {
  position: relative;
  width: 550px;
  max-width: 100%;
  margin: 152px auto;
  margin-right: 80%;
  background: rgb(255, 255, 255);
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 1px 5px #ccc;
}
.update-note input {
  width: 100%;
  max-width: 100%;
  border: none;
  padding: 4px;
  outline: none;
  font-size: 1.2em;
}
textarea {
  width: 100%;
  max-width: 100%;
  border: none;
  padding: 4px;
  outline: none;
  font-size: 1.2em;
}
button {
  border: none;
  background: transparent;
  font-weight: 500;
  float: right;
  margin-top: -5%;
  cursor: pointer;
}

</style>

[维护api调用的方法] axios.js

// npm install axios --save
//axios.defaults.baseURL="http://localhost:8000/api"

import axios from 'axios'

axios.defaults.baseURL=process.env.VUE_APP_AXIOS_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=>{  
            localStorage.getItem('token', response.data.token);  
            return response;
       }).catch(error=>{
            return error;
       })
   }
   updateData(url,data){
       return axios.put(url,data).then(response=>{
           return response;
       })
   }
}

[其中包含后端api的url和来自axios.js的调用方法] user.js

// import axios from 'axios';
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);
    },
    userForgot(data){
        return axios.postData("/auth/sendPasswordResetLink",data);
    },
    userReset(data){
        return axios.postData("/auth/resetPassword",data);
    },
    userCreateNote(data){
        return axios.postData("/createNote",data);
    },
    userDisplayNotes(){
        return axios.getData("/displayNotes");
    },
    userUpdateNotes(data){
        //my actual url is http://localhost:8000/api/updateNote/1 (id= id of my card)
        return axios.updateData("/updateNote/${id}",data);
    }
}

标签： javascripthtmlcssvue.jsaxios

javascript - 如何在 vue.js 中使用基于特定 card-id 的 PUT 方法？

问题描述

解决方案

推荐阅读