Nativescript-vue $ emit не работает должным образом - PullRequest
Новая
       25

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

0 голосов
/ 22 ноября 2018

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

Не уверен, что еще попробовать, вызывается событие tap виджета, ноне отправляется его родителю, поскольку он не вызывает 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

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

В вашем коде отсутствуют 2 вещи,

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

<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);
                }
            });

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

0 голосов
/ 22 ноября 2018

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

    ....
  <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);
                }
            })
          }
        }
...