부모로부터 객체 배열을 가져 와서 표시하고 일부 객체를 삭제할 수 있도록하는 구성 요소를 만들고 있습니다 (= 자식이 부모에게 새 배열을 보냅니다).
이전의 대답은 아이를 이해하는 데 매우 유용 -> 부모 통신하지만 난 전혀 이해한다 오류에 지금 붙어입니다 :
Vue.component('search-box', {
template: '#search-box-template',
props: ['who'],
methods: {
deleteID: function(p) {
var user = _.filter(this.who, function(w) {
return w.id === p.id
})
this.$emit('delete-id', user)
}
}
})
var vm = new Vue({
el: '#root',
data: {
who: [{
"name": "john",
"id": 1
}, {
"name": "mary",
"id": 2
}]
}
})
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<div id="root">
Hello in parent
<search-box v-bind:who="who" v-on:delete-id="who"></search-box>
who is: {{who}}
</div>
<template id="search-box-template">
<div>
<ul>
<li v-for="p in who">person: {{p.name}}, id: {{p.id}} <button v-on:click="deleteID(p)">delete</button></li>
</ul>
</div>
</template>
이 코드를 실행하면 사용자가 올바르게 나열되지만 삭제하려고하면 콘솔에 표시됩니다.
vue.js:1739 Uncaught TypeError: fns[i].apply is not a function
at VueComponent.invoker (vue.js:1739)
at VueComponent.Vue.$emit (vue.js:2210)
at VueComponent.deleteID (search.html:31)
at Proxy.boundFn (vue.js:170)
at click (eval at makeFunction (vue.js:9323), <anonymous>:2:164)
at HTMLButtonElement.invoker (vue.js:1743)
invoker @ vue.js:1739
Vue.$emit @ vue.js:2210
deleteID @ search.html:31
boundFn @ vue.js:170
click @ VM9358:2
invoker @ vue.js:1743
이 오류는 무엇을 의미합니까? 인가 $emit
맞습니까?
두 가지 문제가 있습니다.
_.filter
당신이 사용자를 방출하지 않도록,이 배열을 반환하지만 배열은 사용자를 포함. 이 필터는 p
이미 필터링하려는 사용자 개체 이므로 완전히 불필요 합니다. 그러나 그 코드는 오류의 원인이 아닙니다.v-on:delete-id="who"
who
이벤트 리스너에 객체 ( )를 전달하기 전에 함수가 필요합니다. 그것이 오류를 일으키는 것입니다.코드의 작동 버전은 다음과 같습니다.
Vue.component('search-box', {
template: '#search-box-template',
props: ['who'],
methods: {
deleteID: function(p) {
this.$emit('delete-id', p)
}
}
})
var vm = new Vue({
el: '#root',
data: {
who: [{
"name": "john",
"id": 1
}, {
"name": "mary",
"id": 2
}]
},
methods: {
handleDelete(person) {
const index = this.who.indexOf(person)
this.who.splice(index, 1)
}
}
})
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<div id="root">
Hello in parent
<search-box v-bind:who="who" v-on:delete-id="handleDelete"></search-box>
who is: {{who}}
</div>
<template id="search-box-template">
<div>
<ul>
<li v-for="p in who">person: {{p.name}}, id: {{p.id}} <button v-on:click="deleteID(p)">delete</button></li>
</ul>
</div>
</template>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다