javascript - 如何获取特定点击的卡片 ID 并将该 ID 传递给 vue.js 中的后端 API?
问题描述
我有两个组件 DisplayNotes.vue 负责在仪表板上显示注释,响应来自后端(显示为卡片),当我单击更多图标时,下一个组件是此图标中的 icons.vue(负责图标) (3个点图标)[见选项img ] 1它应该打开下拉选项,如果我单击DeleteNote选项我想根据该ID获取特定的点击卡ID,我必须将该ID传递给我的API-url,我我试图通过使用道具来做,但它没有达到正确的 URl(id 与 #7% 之类的差异..)[检查这里] 2.我无法弄清楚我在哪里出错了,请帮我解决这个问题
user.js
userTrashNote(data){
return axios.userTrash(`/deleteNote/${data.id}`,data);
}
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>
<div class="dropdown">
<i @click="myFunction();" class="fas fa-ellipsis-v"></i>
<div ref="myDropdown" class="dropdown-content">
<!-- when user click on DeleteNote i have to get that cardid -->
<a @click="handlesubmit();">DeleteNote</a>
<a >ChangeLabel</a>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
props: ['cardId'],
data() {
return {
clickedCard: '',
}
},
methods: {
myFunction(event) {
this.$refs.myDropdown.classList.toggle("show");
return event;
// document.getElementById("myDropdown").classList.toggle("show");
},
async handlesubmit() {
let userData = {
id: this.cardId,
}
service.userTrashNote(userData).then(response => {
console.log("details",this.cardId);
alert("Note deleted successfully");
return response;
})
},
}
}
</script>
<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;
cursor: pointer;
}
.dropbtn {
background-color: white;
color: white;
padding: 16px;
font-size: 14px;
font-family: 'Times New Roman', Times, serif;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown a{
cursor:pointer;
}
.dropdown-content {
margin-left: 40%;
display: none;
position: absolute;
background: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 17px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(241, 234, 234)
}
.show {
display: block;
}
</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" :cardId="clickedCard" />
<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>
解决方案
userTrashNote(data){
return axios.userTrash("/deleteNote/${data.id}",data);
}
这是错误的,使用反引号
userTrashNote(data){
return axios.userTrash(`/deleteNote/${data.id}`,data);
}
好的,现在这不碍事了,你为什么要在焦点上更改卡 ID?要么创建一个新组件并将其传递给它,note
以便它可以自行处理,要么在删除时传递 id。
<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" :cardId="note.id" />
<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>
看看我现在如何传递<icons class="imported-icons note-icons" :cardId="note.id" />
note.id 而不是依靠方法来设置它。
推荐阅读
- javascript - 如何正确填充此下拉列表?
- protocol-buffers - protobuff 中的 .Net 字典类型
- python - Python:r2py 无法加载库 R/lib/libR.dylib
- java - Axon 中的聚合与 AKKA 中的演员
- windbg - 要使用 `r` 查询的所有寄存器的列表
- java - 每当我实现我的 CountDownTimer 代码时,我的移动应用程序就会崩溃
- spring-boot - 为什么我的 Spring Boot 应用程序一运行就关闭?
- asp.net-core - Kubernetes 上带有 Pgbouncer 的 Npgsql - 高延迟
- python - Django按计算值排序
- node.js - 在应用程序的客户端/服务器端存储 JWT/授权 [JavaScript]