VueJs: use method from root element inside a component

Question

In a simple HTML page, I used the following vueJs code. I need to click on the button which will insert a checkbox and a text into the DOM.

My code follows:

<template id="add-item-template">
    <div class="input-group">
        <input  v-model="newItem" placeholder="add shopping list item" type="text" class="form-control">
        <span class="input-group-btn">
            <button @click="addItem" class="btn btn-default" type="button">Add!</button>
        </span>
    </div>
</template>

<div id="app" class="container">
    <h2>{{ title }}</h2>
    <add-item-component></add-item-component>
</div>

And the javascript part is :

<script>
    var data = {
        items: [
            {
                text: 'Bananas', 
                checked: true 
            }, 
            { 
                text: 'Apples', 
                checked: false 
            }
        ],
        title: 'My Shopping List'
    };

    Vue.component('add-item-component', {
        template: '#add-item-template',
        data: function () {
            return {
                newItem: ''
            }
        },
        props:['addItem']
    });

    new Vue({
        el: '#app',
        data: data,
        methods: {
            addItem: function () {
                var text;

                text = this.newItem.trim();
                if (text) {
                    this.items.push({
                        text: text,
                        checked: false
                    });
                    this.newItem = "";
                }
            }
        }
    });

</script>

When I run the page, I find the following error message in console :

[Vue warn]: Invalid handler for event "click": got undefined (found in component )

I understand that addItem method is not defined in add-item-template template and so although I used addItem as the prop, the click handler becomes undefined .

Now how can I make the click handler work ??

Answer 1

Click event in child component should be handled there and if you want to see the output in a parent component, you should emit an event to the parent. In parent component you can listen to that emitted event and handle that.

var data = {
        items: [{ text: 'Bananas', checked: true }, { text: 'Apples', checked: false }],
        title: 'My Shopping List'
    };

Vue.component('add-item-component', {
    template: '#add-item-template',
    data: function () {
        return {
            newItem: ''
        }
    },
    methods: {
        addItem() {
            const text = this.newItem.trim();
            if(text) {
              // we are emitting an event called "add" and data object {item: this.newItem}
              this.$emit('add', { text });
            }
        }
    }
});



new Vue({
    el: '#app',
    data,
    methods: {
      // here we're handling `add` event from child component with destructured `data` object as a parameter
        addNewItem({text}) {
          data.items.push({
              text,
              checked: false
          });
          console.log(data)
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="add-item-template">
        <div class="input-group">
            <input  v-model="newItem" placeholder="add shopping list item" type="text" class="form-control">
            <span class="input-group-btn">
          <button @click="addItem" class="btn btn-default" type="button">Add!</button>
        </span>
        </div>
    </template>

<div id="app" class="container">
    <h2>{{ title }}</h2>
    <!-- here we are listening to the `add` event from the child component -->
    <add-item-component @add="addNewItem"></add-item-component>
    <div v-for="item in items"> {{ item.text }}</div>
</div>