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
'programing' 카테고리의 다른 글
지도에서 반복 제거 (0) | 2022.08.29 |
---|---|
새로운 요소/컴포넌트를 동적으로 추가하려면 appendChild와 동등한 Vue.js를 선택하십시오. (0) | 2022.08.29 |
JPA와 최대 절전 모드로 mapBy를 설명할 수 있는 사람? (0) | 2022.08.29 |
문자열이 null이 아니거나 비어 있지 않은지 확인합니다. (0) | 2022.08.29 |
C 표준 라이브러리와 C POSIX 라이브러리의 차이점 (0) | 2022.08.29 |