Estoy trabajando con BootstrapVue .
Tengo un método en mi parent.vue donde paso un valor ( this.propsIndex ) a mi child.vue .
Ahora quiero usar este value cada vez que se haga clic en un método de mi child.vue, pero ¿cómo puedo activar mi función y hacer que funcione?
¡Muchas gracias!
Si es posible, quiero evitar usar el watch .
mi padre.vue
<template> <div v-for="(id, index) in inputs" :key="index"> <b-button @click="deleteViaIndex(index)">Delete</b-button> <child :indexProps="indexProps" /> </div> <div> <b-button @click="addInput()">Add Input</b-button> </div> </template> <script> methods: { deleteViaIndex(index) { this.propsIndex= index; }, addInput() { this.inputs.push({}) }, }, data() { return { inputs: [{}], propsIndex: '', } } </script>mi hijo.vue (script)
props: ["propsIndex"], methods: { deleteViaParentIndex() { //HERE I WANT TO USE IT EVERY TIME IT WILL BE CLICKED IN MY PARENT.VUE //BUT FOR NOW IT'S NOT DOING ANYTHING WHEN I CONSOLE.LOG(this.propsIndex) } }Parece una falta de coincidencia de nombres. En un componente secundario, tiene un prop propsIndex , pero en una plantilla principal está pasando indexProps .
Al pasar accesorios, debe recordar que el nombre del accesorio siempre está en la primera parte, y el valor que está pasando debe ir a continuación. https://vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props
Además, dado que los nombres de los atributos HTML no distinguen entre mayúsculas y minúsculas, debe pasar una propiedad de esta manera:
<child :props-index="indexProps" />Además del desajuste de nombres mencionado por Marcin, puede acceder a un componente secundario desde un componente principal utilizando una referencia en la plantilla:
<child ref="childrenComponents" :props-index="propsIndex" />
Dado que tiene varios de los componentes secundarios dentro de un v-for , esto hace que los componentes de childrenComponents en $refs sean una matriz de componentes. Para llamar a deleteViaParentIndex en todos ellos, debe iterarlos:
deleteViaIndex(index) { this.propsIndex = index; this.$refs.childrenComponents.forEach(child => child.deleteViaParentIndex()); }Hay una optimización más que puedes hacer.
Dado que está utilizando propsIndex solo para pasar un índice que usa el componente secundario, y ya tiene el índice como un parámetro en deleteViaIndex , simplemente puede pasarlo al elemento secundario como un parámetro durante la llamada a la función deleteViaParentIndex , eliminando así la necesidad para los datos de propsIndex en conjunto:
en parent.vue :
deleteViaIndex(index) { this.$refs.childrenComponents.forEach(child => child.deleteViaParentIndex(index)); } en child.vue :
deleteViaParentIndex(index) { // operations using index }