Nativescript-vue $ emit не работает должным образом

Я пытаюсь сделать так, чтобы простой дочерний компонент передавал событие своему родителю, но он не вызывается.

Не уверен, что еще попробовать, событие касания виджета вызывается, но не отправляется его родительскому элементу, поскольку он не вызывает console.log

Что мне здесь не хватает?

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>

Я действительно новичок в vue и nativescript.

Пример игровой площадки: https://play.nativescript.org/?template=play-vue&id=9dPpDZ&v=3


nativescript javascript vue.js vuejs2 nativescript-vue
person Mojimi    schedule 22.11.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В вашем коде не хватает двух вещей,

Во-первых, вы должны обрабатывать событие, сгенерированное родительским компонентом.

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

Во-вторых, ваш синтаксис forEach, первым аргументом обратного вызова является widget, а вторым аргументом будет index (i),

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

Обновленная площадка

person Manoj    schedule 22.11.2018

arrow_upward
2
arrow_downward

Вы должны обработать испущенное событие в родительском компоненте, например:

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

и добавьте метод removeWidget следующим образом:

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