Quiero crear un componente de búsqueda que reciba un objeto y luego lo filtre por entrada del usuario. Luego páselo nuevamente a los padres para mostrar lo que filtré. (Siguiente)
// Parent component <AppSearch :bookmarks="bookmarks" /> ... bookmarks = [ { "title": "Facebook", "url": "https://facebook.com" }, { "title": "Google", "url": "https://google.com/" } ] // Child search component <template> <input type="text" v-model="searchQuery"> </input> </template> <script> export default { props: ['bookmarks'], data() { return { searchQuery: null, } }, computed: { filteringBookmarks:{ get: function() { if(this.searchQuery){ return this.bookmarks.filter(data => data.title.toLowerCase().includes(this.searchQuery.toLowerCase())) } else{ return this.bookmarks; } } } }, watch: { filteringBookmarks(newValue) { console.log(`yes, computed property changed: ${newValue}`); // <--- INFINITES MESSAGES this.$emit('update:bookmarks', filteringBookmarks) } }, } </script>He probado de otras maneras, pero siempre termina en el mismo lugar, todo el sitio web se congela. Parece que nunca deja de actualizar los "marcadores". Tal vez es un problema circular?
La mejor manera de evitar este problema circular es mirar el searchQuery
<script> export default { props: ['bookmarks'], data() { return { searchQuery: null, } }, watch: { searchQuery(newValue) { let filteringBookmarks=[] if(newValue){ filteringBookmarks=this.bookmarks.filter(data => data.title.toLowerCase().includes(this.searchQuery.toLowerCase())) }else{ filteringBookmarks=this.bookmarks; } this.$emit('update:bookmarks', filteringBookmarks) } }, } </script>Está emitiendo un valor calculado al componente principal, y el principal actualiza los marcadores y lo pasa como accesorio al componente secundario, lo que hace que la propiedad calculada se actualice y, dado que tiene un observador en la propiedad calculada, volverá a emitir es un nuevo valor que causa un bucle infinito .
Una solución puede ser emitir una consulta de búsqueda y luego filtrar los resultados en el elemento principal.