이 TypeError가 잘못된 this. $ emit에 연결되어 있습니까?

WoJ

부모로부터 객체 배열을 가져 와서 표시하고 일부 객체를 삭제할 수 있도록하는 구성 요소를 만들고 있습니다 (= 자식이 부모에게 새 배열을 보냅니다).

이전의 대답은 아이를 이해하는 데 매우 유용 -> 부모 통신하지만 난 전혀 이해한다 오류에 지금 붙어입니다 :

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맞습니까?

리누스 보그

두 가지 문제가 있습니다.

  1. 당신은 _.filter당신이 사용자를 방출하지 않도록,이 배열을 반환하지만 배열은 사용자를 포함. 이 필터는 p이미 필터링하려는 사용자 개체 이므로 완전히 불필요 합니다. 그러나 그 코드는 오류의 원인이 아닙니다.
  2. 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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

PHP가 잘못된 MySQL 호스트 이름에 연결되어 있습니까?

분류에서Dev

Flask-Session Redis가 AWS의 잘못된 호스트에 연결되어 있습니까?

분류에서Dev

GameObject에 연결되어있는 동안 Particplesystem Position이 잘못된 이유는 무엇입니까?

분류에서Dev

OpenGL 텍스처에 잘못된 데이터가 포함되어 있습니다. 무슨 일입니까?

분류에서Dev

TypeError : 'class Meta'에 잘못된 속성이 있습니다. python (django)이 오류를 어떻게 수정합니까?

분류에서Dev

GDB : 대상 원격 연결이 잘못된 위치에 있습니까?

분류에서Dev

이름에 잘못된 문자가있는 파일을 어떻게 삭제할 수 있습니까? (Win7)

분류에서Dev

SignalR : 연결 ID가 잘못된 형식입니다. 세션이 만료되면 어떻게 처리합니까?

분류에서Dev

PHP, 업로드 된 이미지 URL이 데이터베이스에 저장되지 않습니다. 내가 어디로 잘못 가고 있습니까?

분류에서Dev

Launchpad에 잘못된 업스트림 연결이 표시되면 어떻게해야합니까?

분류에서Dev

Launchpad에 잘못된 업스트림 연결이 표시되면 어떻게해야합니까?

분류에서Dev

이 파이썬 코드가 어디에서 잘못되고 있습니까?

분류에서Dev

내 Firestore에 몇 개의 클라이언트가 연결되어 있습니까?

분류에서Dev

Nvidia Optimus가 디스플레이에 연결되어 있지 않습니까?

분류에서Dev

대상 호스트가 이미 지정된 인터페이스에 연결되어있는 경우 -o 및 -i가 의미가 있습니까?

분류에서Dev

Elixir, postgresql 오류 : 연결에 잘못된 유형이 있습니다.

분류에서Dev

객체 데이터가 C ++ 생성자에서 잘못된 순서로 초기화되면 어떤 종류의 버그가 발생할 수 있습니까?

분류에서Dev

오류 # 2136을 해결할 수 없습니다. swf에 잘못된 데이터가 있습니다.

분류에서Dev

테이블의 검색 결과로 인해 테이블에 잘못된 데이터가 있습니다.

분류에서Dev

java + =가 잘못된 결과를 얻는 이유는 무엇이며 어떻게 방지 할 수 있습니까?

분류에서Dev

중첩 된 추가 작업이 잘못 되었습니까?

분류에서Dev

Chrome에서 텍스트 상자의 클릭 및 초점 이벤트가 잘못된 순서로되어 있습니까?

분류에서Dev

제공된 행 이름의 길이가 R에서 잘못되었습니다.

분류에서Dev

C에서 두 개의 가까운 지점이있는 acos () 잘못된 결과

분류에서Dev

앱 이력서에 이미지가 표시되지 않음, [해결됨-잘못된 코딩이었습니다.]

분류에서Dev

StompClient에 연결되어있는 동안 내가 잘못 될 수있는 부분은 무엇입니까?

분류에서Dev

정렬 된 연결 목록 구현에 관한 내 논리가 잘못 되었습니까?

분류에서Dev

JSON 데이터에 NSJSONSerialization이 중단되는 "잘못된"문자가 있습니다.

분류에서Dev

연관 배열에서 검색된 값이 잘못 되었습니까?

Related 관련 기사

  1. 1

    PHP가 잘못된 MySQL 호스트 이름에 연결되어 있습니까?

  2. 2

    Flask-Session Redis가 AWS의 잘못된 호스트에 연결되어 있습니까?

  3. 3

    GameObject에 연결되어있는 동안 Particplesystem Position이 잘못된 이유는 무엇입니까?

  4. 4

    OpenGL 텍스처에 잘못된 데이터가 포함되어 있습니다. 무슨 일입니까?

  5. 5

    TypeError : 'class Meta'에 잘못된 속성이 있습니다. python (django)이 오류를 어떻게 수정합니까?

  6. 6

    GDB : 대상 원격 연결이 잘못된 위치에 있습니까?

  7. 7

    이름에 잘못된 문자가있는 파일을 어떻게 삭제할 수 있습니까? (Win7)

  8. 8

    SignalR : 연결 ID가 잘못된 형식입니다. 세션이 만료되면 어떻게 처리합니까?

  9. 9

    PHP, 업로드 된 이미지 URL이 데이터베이스에 저장되지 않습니다. 내가 어디로 잘못 가고 있습니까?

  10. 10

    Launchpad에 잘못된 업스트림 연결이 표시되면 어떻게해야합니까?

  11. 11

    Launchpad에 잘못된 업스트림 연결이 표시되면 어떻게해야합니까?

  12. 12

    이 파이썬 코드가 어디에서 잘못되고 있습니까?

  13. 13

    내 Firestore에 몇 개의 클라이언트가 연결되어 있습니까?

  14. 14

    Nvidia Optimus가 디스플레이에 연결되어 있지 않습니까?

  15. 15

    대상 호스트가 이미 지정된 인터페이스에 연결되어있는 경우 -o 및 -i가 의미가 있습니까?

  16. 16

    Elixir, postgresql 오류 : 연결에 잘못된 유형이 있습니다.

  17. 17

    객체 데이터가 C ++ 생성자에서 잘못된 순서로 초기화되면 어떤 종류의 버그가 발생할 수 있습니까?

  18. 18

    오류 # 2136을 해결할 수 없습니다. swf에 잘못된 데이터가 있습니다.

  19. 19

    테이블의 검색 결과로 인해 테이블에 잘못된 데이터가 있습니다.

  20. 20

    java + =가 잘못된 결과를 얻는 이유는 무엇이며 어떻게 방지 할 수 있습니까?

  21. 21

    중첩 된 추가 작업이 잘못 되었습니까?

  22. 22

    Chrome에서 텍스트 상자의 클릭 및 초점 이벤트가 잘못된 순서로되어 있습니까?

  23. 23

    제공된 행 이름의 길이가 R에서 잘못되었습니다.

  24. 24

    C에서 두 개의 가까운 지점이있는 acos () 잘못된 결과

  25. 25

    앱 이력서에 이미지가 표시되지 않음, [해결됨-잘못된 코딩이었습니다.]

  26. 26

    StompClient에 연결되어있는 동안 내가 잘못 될 수있는 부분은 무엇입니까?

  27. 27

    정렬 된 연결 목록 구현에 관한 내 논리가 잘못 되었습니까?

  28. 28

    JSON 데이터에 NSJSONSerialization이 중단되는 "잘못된"문자가 있습니다.

  29. 29

    연관 배열에서 검색된 값이 잘못 되었습니까?

뜨겁다태그

보관