Nativescript-vue $emit not working as expected

0
votes

I'm trying to make a simple child component pass a event to it's parent, but it's not being called.

Not sure what else to try, the tap event of the Widget is being called but is not being emitted to it's parent, since it is not calling the console.log

What am I missing here?

Parent.vue :

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel">
                <Widget v-for="widget in widgets" :widgetName="widget.name"/>
                <Button text="Add widget" class="btn btn-primary" @tap="addWidget" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import Widget from "./Widget";
    export default {
        data() {
            return {
                widgets: [{
                    name: "widget1"
                }, {
                    name: "widget2"
                }]
            };
        },
        components: {
            Widget
        },
        methods: {
            addWidget() {
                this.widgets.push(
                    {
                        name: `widget${this.widgets.length+1}`
                    }
                )
            },
            removeWidget(name){
                console.log('removing widget');
                this.widgets.forEach( (i, widget) => {
                    if(widget.name === name){
                        this.widgets.splice(i,1);
                    }
                })
            }
        }
    };
</script>

Widget.vue :

<template>
    <Button :text="widgetName" @tap="removeThis">
</template>

<script>
    export default {
        props: {
            widgetName: "",
        },
        methods: {
            removeThis(){
                console.log('emiting event to remove widget', this.widgetName);
                this.$emit("removeWidget", this.widgetName);
            }
        }
    };
</script>

I'm a really beginner in vue and nativescript.

Playground example : https://play.nativescript.org/?template=play-vue&id=9dPpDZ&v=3

2
javascriptvue.jsvuejs2nativescriptnativescript-vue

2 Answers

2
votes

You are missing 2 things in your code,

First, you are suppose to handle the emitted event from parent component

<Widget v-for="widget in widgets" :widgetName="widget.name"
                @removeWidget="removeWidget" />

Secondly, your forEach syntax, the first argument to the callback is widget and the second argument will be index (i),

this.widgets.forEach((widget, i) => {
                if (widget.name === name) {
                    this.widgets.splice(i, 1);
                }
            });

Updated Playground

2
votes

You have to handle the emitted event in the parent component like :

    ....
  <Widget v-for="widget in widgets" :widgetName="widget.name"  @remove-widget="removeWidget" />
    ...

and add the method removeWidget as follows :

     methods: {
        addWidget() {
            ....
           },
         removeWidget(name){
             console.log('removing widget');
            this.widgets.forEach( (widget,i ) => {
                if(widget.name === name){
                    this.widgets.splice(i,1);
                }
            })
          }
        }