1

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".

2
  • Que versión de vue estas trabajando ? Commented el 26 sept. 2019 a las 16:06
  • La versión 2.6.10 Commented el 26 sept. 2019 a las 16:16

1 respuesta 1

1

El problema viene dado principalmente a la manera de declarar tu props y la manera en que pasas el valor, a partir de vue 2.0 la manera idónea de hacer esto es la siguiente;

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>
  <todo-item :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>

Nota la linea donde se usa el component que cambio de esto;

<TodoItem v-bind:titulo_item={titulo_item} />

a esto:

<todo-item :titulo-item="titulo_item" />

Segun las especificaciones de vue 2 los nombre de componentes y props aunque los tengas en UpperCalmelCase debes llamarlos en tu html en kebab-case.

TodoItem.vue (componente Child)

<template>
  <h6 class="mb-0">{{titulo_item}}</h6>
</template>

<script>
export default {
    name: 'TodoItem',
    components: {

    },
    props: {
        tituloItem:String
    }
}
</script>

Se cambia tu props propiedad de esto:

props: {
      titulo_item: {
      type: String,
      }
    }

A esto:


props: {
        tituloItem:String
    }

Según las especificaciones de vue 2 esta es la manera correcta de tipar las props que tendrá tu componente.

Resumen

Mi solución propuesta es cambiar la linea de uso del componente en tu html a;

<todo-item :titulo-item="titulo_item" />

y tus props a;

props: {
        tituloItem:String
    }
1
  • 1
    Genial me ha servido aunque te comento que sólo me funciona bien si cambio la primera parte. Si le pongo las props como me dices "tituloItem:String" entonces no me aparece nada. Commented el 27 sept. 2019 a las 8:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.