Блог

у меня есть два компонента DisplayNotes.Вуэ, который отвечает за отображение нот на приборной панели wthe ответ приходит от сервера(отображается в картах),и следующий компонент-это иконы.Вуэ(отвечает за иконки) на этой иконы, когда я нажимаю на другое-значок(3 точки-пиктограммы)[см. Вариант ИМГ]1 следует открыть раскрывающееся меню,если я нажимаю на DeleteNote вариант я хочу получить эту конкретную нажал карты идентификатора с помощью этого идентификатора я должен передать этот идентификатор, чтобы мой API-интерфейс URL-адрес, я пытаюсь сделать с помощью реквизита, но это не наезд правильные URL-адреса (идентификатора является то, что разница как #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);
}
 

Хорошо, теперь это в стороне, почему вы меняете идентификатор карты в фокусе? либо создайте новый компонент и передайте его note , чтобы он мог работать сам, либо передайте идентификатор при удалении.

 <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 вместо того, чтобы полагаться на метод, чтобы установить его.