Vue component is not pushing in props

Question

I’m creating a simple task list with Vue.js, doing so using separate components in files. One of the components has the function of adding an object to an array, which is a props, but there is the error, the component is not able to identify the array in which it has to be added. I already gave console.log and gave undefined, but in Chrome dev tools, if I hover over the property, the array, shows what’s inside it and shows that it’s rather the array I want and kind of, from what I understand, says it’s working in the scope of that component, or I’m wrong the way dev tools works.

App.:

<template>
<div id="app" class="container">
  <h2>{{title}}</h2>
  <add-item-component v-bind:items="items"></add-item-component>
  <items-component :items="items"></items-component>
  <div class="footer">
    <hr>
    <change-title-component></change-title-component>
  </div>
</div>
</template>

<script>
import AddItemComponent from "./components/AddItemComponent";
import ItemsComponent from "./components/ItemsComponent";
import ChangeTitleComponent from "./components/ChangeTitleComponent";

export default {
  components: {
    AddItemComponent,
    ItemsComponent,
    ChangeTitleComponent
  },
  data() {
    return {
      items: [{text: "Bananas", checked: true},
              {text: "Apples", checked: false}],
      title: "My Shopping List"
    }
  },
}
</script>

<style>

</style>

Additemcomponent.Vue:

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

<script>
    export default {
        data: () => {
            return {
                newItem: ""
            }
        },
        props: ["items"],
        methods: {
            addItem: () => {
                let text;

                console.log(this.newItem);
                console.log(this.items);
                text = this.newItem.trim();
                if (text) {
                    this.items.push({
                        text: text,
                        checked: false
                    });
                    this.newItem = "";
                }
            },
            changeNewItem: (event) => {
                this.newItem = event.target.value;
            }
        }
    }
</script>

<style scoped>

</style>

I am running this code on a webpack server and already restarted several times but nothing.

Answer 1

I think it’s because you declared the method as Arrow Function. In that case, the this inside will be the thismost external module, not its component.

Try one of these options:

// ...
methods: {
    addItem() {

    }
}

or

// ...
methods: {
    addItem: function() {

    }
}

This should solve the Undefined you reported, but I don’t know if it solves your application. You seem to be wanting the changes in this array to spread to the parent component, and from it to the sibling, but that’s not going to happen (the props are propagated only "inward").