CODEWITHSUNDEEP
vue.jsvuejs2vue-component
vic
vic

Reputation: 2818

Event from a child component isn't detected

Based on the tree view sample (https://v2.vuejs.org/v2/examples/tree-view.html) on Vue , I reorganize its code as the followings: in a parent component

<ul>
      <item class="item" :model="treeData" v-on:changeType="changeTypeEvent"></item>
</ul>
...
<script>
  ...
    methods: {
       changeTypeEvent: function () {
       console.log('Incoming event ' )
    }
 ...
</script>

In its child component,

<li>
  <div :class="{bold: isFolder}" @click="toggle" @dblclick.once="changeType">
        {{model.name}}
    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </div>
  <ul v-show="open" v-if="isFolder">
    <item class="item" v-for="model in model.children" v-bind:key="model.name" :model="model">
        </item>
    <li class="add" @click="addChild">+</li>
  </ul>
  </li>
  ...
<script>
export default {
  name: 'item',
  props: {
    model: Object
  },
  data: function () {
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
       this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
   changeType: function () {
    if (!this.isFolder) {
      console.log('Double click ' + this.model.name)
      this.$emit('changeType')
    }
  },
 }
}
</script>

For some reason, the event is not detected in the parent component. I have a working code with the same structure. Why doesn't it work in this case?

Upvotes: 1

Views: 182

Answers (1)

Philipp Gfeller
Philipp Gfeller

Reputation: 1259

Html attribute names are case insensitive (https://www.w3.org/TR/2012/WD-html-markup-20120315/documents.html#case-insensitivity), therefore Vue transforms the event listener on the parent from pascal-case changeType to kebab-case change-type for the template:

<ul>
      <item class="item" :model="treeData" v-on:change-type="changeTypeEvent"></item>
</ul>

Vue documentation: https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

Upvotes: 1

Related Questions