Estou criando uma simples lista de tarefas com Vue.js, fazendo isso usando componentes separados em arquivos. Um dos componentes tem a função de adicionar um objeto a uma array, que é uma props, mas aí está o erro, o componente não está conseguindo identificar a array na qual tem que ser adicionada. Já dei console.log
e deu undefined
, mas no chrome dev tools, se eu passar o mouse em cima da propriedade, a array, mostra o que tem dentro dela e mostra que é sim a array que eu quero e meio que, pelo que entendi, diz que ela tá funcionando no escopo daquele componente, ou eu estou enganado da forma como o dev tools funciona.
App.vue:
<template> <div id="app" class="container"> <h2>{Componente Vue não está dando push na props}</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>
Estou rodando esse código em um servidor webpack e já reiniciei várias vezes mas nada.