programing

VueJs 2클릭이 작동하지 않는 것 같다

bestcode 2022. 8. 29. 22:12
반응형

VueJs 2클릭이 작동하지 않는 것 같다

오류는 발생하지 않고 컴파일 중이기 때문에 무엇을 잘못하고 있는지 잘 모르겠습니다.나는 그 문제를 찾아봤지만 성공하지 못했다.

Bulk Expenses가 있습니다.몇 가지 지출 레코드를 가져와 표시하는 vue, 다음으로 Bulk Expense.vue는 각 레코드를 표시하는 중첩된 구성 요소입니다.휴지통 아이콘을 클릭하여 비용 ID를 부모 컴포넌트로 다시 내보내고 삭제 스크립트를 실행합니다.다른 프로젝트에서 하고 있는데 완벽하게 작동하고 있어서 여기서 뭘 잘못하고 있는지 모르겠어요.

지출비용에 연결하기 위해 이동 경로를 끌어오기 위한 TypeAhead인 Lookup 구성 요소도 있지만, 이 구성 요소는 작동합니다.

일괄 비용표시하다

<template>
    <div>
        <form action="#" @submit.prevent="createBulkExpense()" class="publisher bt-1 border-fade bg-white" autocomplete="off">
            <table>
                <thead>
                    <tr>
                        <td><input v-model="bulk_name" type="text" placeholder="Name"></td>
                        <td><input id="bulk_expensed_at" type="text" name="bulk_expensed_at" placeholder="Date Expense Incurred"></td>
                        <td><input id="bulk_type_id" type="text" name="bulk_type" placeholder="Type"></td>
                        <td>
                            <lookup
                                source="/api/lookup/trip"
                                placeholder="Search your trips"
                                filter-key="name"
                                :start-at="3"
                                v-on:selected-link="onSelectedTrip"
                                :modellink="modellink">
                            </lookup>
                        </td>
                        <!-- <td><input id="bulk_tags" type="text" name="bulk_tags" placeholder="Tags"></td> -->
                        <td><input id="bulk_vendor" type="text" name="bulk_vendor" placeholder="Vendor"></td>
                        <td><input id="bulk_method" type="text" name="bulk_method" placeholder="Payment Method"></td>
                        <td><input id="bulk_total" type="text" name="bulk_total" placeholder="Total Amount"></td>
                        <td><input id="bulk_paidby_user_id" type="text" name="bulk_paidby" placeholder="Paid By"></td>
                        <td><input id="bulk_status" type="text" name="bulk_status" placeholder="Payment Status"></td>
                        <td><input id="bulk_notes" type="text" name="bulk_notes" placeholder="Notes"></td>
                    </tr>
                </thead>
                <tbody>
                    <expense v-for="expense in expenses"
                        :key="expense.id"
                        :expense="expense"
                        @expense-deleted="deleteExpense($event)">
                    </expense>
                </tbody>
            </table>
        </form>
    </div>
</template>
<script>
    // import CommentsManager from './CommentsManager.vue';
    var axios = require("axios");
    import lookup from './Lookup.vue';
    import expense from './BulkExpense.vue';
    export default {
        components: {
            lookup, expense
        },
        data: function() {
            return {
                modellink: {
                   "name": "n/a",
                   "description": "",
                   "id": null,
                   "model": "n/a"
                },
                bulk_trip: {
                   "name": "n/a",
                   "description": "",
                   "id": null
                },
                selectName: "",
                bulk_name: "",
                bulk_expensed_at: "",
                bulk_type: "",
                bulk_tags: "",
                bulk_vendor: "",
                bulk_method: "",
                bulk_total: "",
                bulk_paidby: {
                    name: "",
                    id: ""
                },
                bulk_status: "",
                bulk_notes: "",
                expense: {
                        id: 1,
                        name: "",
                        expensed_at: "",
                        type: {
                            id: "",
                            name: ""
                        },
                        trip: {
                            id: "",
                            name: ""
                        },
                        tags: [],
                        vendor: "",
                        method: "",
                        total: "",
                        paidby: {
                            id: "",
                            name: ""
                        },
                        status: {
                            id: "",
                            name: ""
                        },
                        notes: ""
                    },
                expenses: [
                    {
                        id: 1,
                        name: "",
                        expensed_at: "",
                        type: {
                            id: "",
                            name: ""
                        },
                        trip: {
                            id: "",
                            name: ""
                        },
                        tags: [],
                        vendor: "",
                        method: "",
                        total: "",
                        paidby: {
                            id: "",
                            name: ""
                        },
                        status: {
                            id: "",
                            name: ""
                        },
                        notes: ""
                    }
                ]
            };
        },        
        created() {
            this.fetchExpenses();
        },
        methods: {
            // onSelectedLink: function (talink) {
            //     // alert(JSON.stringify(talink.description, null, 4));
            //     this.modellink = talink
            // },
            onSelectedTrip: function (talink) {
                // alert(JSON.stringify(talink.description, null, 4));
                this.bulk_trip = talink
                this.modellink = talink
            },
            fetchExpenses() {
                axios.get('/api/expense').then((res) => {
                    //alert(JSON.stringify(res.data[0], null, 4));
                    this.expenses = res.data;
                });
            },

            createExpense() {
                axios.post('/api/expense', {name: this.expense.name, vessel_id: Laravel.vesselId, expensed_at: this.expense.expensed_at })
                    .then((res) => {
                        this.expense.content = '';
                        // this.expense.user_id = Laravel.userId;
                        // this.task.statuscolor = '#ff0000';
                        this.edit = false;
                        this.fetchExpenses();
                    })
                    .catch((err) => console.error(err));
            },
            deleteExpense(expense) {
                console.log(expense.id);
                alert(expense.id);
                axios.delete('/api/expense/' + expense.id)
                    .then((res) => {
                        this.fetchExpenses()
                    })
                    .catch((err) => console.error(err));
            },
        }
    }
</script>

일괄 비용표시하다

<template>
    <tr>
        <td><input v-model="expense.name" type="text" name="name"></td>
        <td><input v-model="expense.expensed_at"></td>
        <td v-if="expense.type"><input v-model="expense.type.name"></td>
        <td>
            <trip-select  v-bind:tripId="expense.trip_id" selectName="trip_id"></trip-select>
        </td>
        <td><input v-model="expense.vendor"></td>
        <td><input v-model="expense.method"></td>
        <td><input v-model="expense.total"></td>
        <td v-if="expense.paidby"><input v-model="expense.paidby.name" ></td>
        <td v-if="expense.status"><input v-model="expense.status.name" ></td>
        <td><input v-model="expense.notes"></td>
        <td>
            <a class="text-lighter hover-light"  v-on:click="deleteExpense" href="#"><i class="fas fa-trash"></i></a>
        </td>
    </tr>
</template>
<script>
    import TripSelect from './TripSelect.vue';
    import typeahead from './Typeahead.vue';
    export default {
      name: 'expense',
      components: { TripSelect, typeahead },
      props: {
            bulk_name: {
                type: String,
                required: false
            },
            expense: {
                required: true,
                type: Object,
                default: function () {
                  return {
                        id: 1,
                        name: "",
                        expensed_at: "",
                        type: {
                            id: "",
                            name: ""
                        },
                        trip: {
                            id: "",
                            name: ""
                        },
                        tags: [],
                        vendor: "",
                        method: "",
                        total: "",
                        paidby: {
                            id: "",
                            name: ""
                        },
                        status: {
                            id: "",
                            name: ""
                        },
                        notes: ""
                  }
                }
            }
        },
        data() {
            return {
            }
          },
          methods: {
            deleteExpense() {
                alert(this.expense.id)
                this.$emit('expense-deleted', {
                    'id': this.expense.id,
                });
            }
          }
    }
</script>

질문에 직접 답변하지는 못할 수 있지만, 이 방법은 확실히 효과가 있습니다.또한 안티 패턴의 예와 같은 근본적인 문제를 해결합니다.

부모에게 송신하는 다른 메서드를 컴포넌트 내부에 작성하는 대신 자녀의 클릭 핸들러에서 송신합니다.또한 비용을 주고받기만 하면 재산에 부담을 주지 않을 수 있습니다.

신고 필요 없음$event디폴트로 사용할 수 있습니다.

<expense v-for="expense in expenses" :key="expense.id" :expense="expense" @expense-deleted="deleteExpense"></expense>

그리고 클릭 핸들러에서emit액션을 수행하고 비용을 돌려받습니다.

<a class="text-lighter hover-light"  
    @click="$emit('expense-deleted', expense)" 
    href="#">
    <i class="fas fa-trash"></i>
</a>

이를 통해 위의 기본적인 문제와 프로세스에서 발생할 수 있는 문제에 대처할 수 있습니다.

그리고 네가 섞이는 것도 보여v-on:click그리고.@click하지만 둘 다 똑같아 하나는 다른 하나를 줄인 거야저는 그냥@click응집력을 위해.

마지막으로 이 접근방식을 위한 MCVE를 소개합니다.

편집

궁금할 경우를 대비해서 다음과 같이 약속이 해결된 후 기존 컬렉션에서 삭제할 수 있습니다.

this.expenses.slice(this.expenses.findIndex(o => o.id === expense.id), 1)

우리 이후로expense저희 컬렉션에는 항상 존재하기 때문에 존재 여부를 확인할 필요가 없기 때문에 라이너 1개를 사용할 수 있습니다.

또는 어레이 전체를 교환할 수도 있지만Vue.set이 경우:

Vue.set(this, 'expenses', this.expenses.filter(o => o.id !== expense.id))

언급URL : https://stackoverflow.com/questions/50937961/vuejs-2-click-doesnt-seem-to-work

반응형