Estoy haciendo una simple app de "lista de tareas" y quiero que cuando se pulse en el botón "Añadir", aparezca abajo lo que se está escribiendo en el input.
Para eso utilizo v-model en el input que están en el componente Parent (TodoList.vue) y luego v-bind en el componente <TodoItem v-bind:titulo_item={titulo_item} />
(porque lo que aparecerá en pantalla es un h6 que está en el componente Child, no en TodoList.vue
)
Así es como lo tengo organizado:
TodoList.vue (componente Parent)
<template>
<div class="todo-list-wrapper">
<div class="mt-2 first-wrapper">
<b-form-input v-model="titulo_item" placeholder="añade alguna cosa... "></b-form-input>
<b-button v-on:click="newItem" pill variant="primary">Añadir</b-button>
</div>
<TodoItem v-bind:titulo_item={titulo_item} />
</div>
</template>
<script>
import TodoItem from "./TodoItem"
export default {
name: 'TodoList',
components: {
TodoItem
},
data () {
return {
titulo_item: "",
itemEstaCreado: false
}
},
methods: {
newItem: function (){
this.itemEstaCreado = true;
}
}
}
</script>
TodoItem.vue (componente Child)
<template>
<h6 class="mb-0">{{titulo_item}}</h6>
</template>
<script>
export default {
name: 'TodoItem',
components: {
},
props: {
titulo_item: {
type: String,
}
}
}
</script>
El problema es si escribo en el <b-form-input v-model="titulo_item" placeholder="añade alguna cosa... "></b-form-input>
"manzanas", no me aparece en el <h6 class="mb-0">{{titulo_item}}</h6>
"manzanas". Sino: { "titulo_item": "manzanas" }
Literalmente, está cogiendo el objeto entero como una string, cuando sólo quiero que coja la string "manzanas".