You can search in a text field in the root node and update two components

Question

You can search in a text field in the root node and update two components

Navigation

#1 by (0 votes)

1

I have created a root node with two components, in the rais node I have a text field to search, which is sent to each component to search in an array of links (links) and with the result render each component. Additionally to each component I send the reference of a function so that each component notifies if it does not have elements. But when I enter the text in the form the console sends me this message:

[Vue warn]: You may have an infinite update loop in a component render   function.

found in

--- >

Code:

var links =[...];
var links2 =[...];

var template = '
<section class="section has-text-centered" v-if="searchBy.length > 0">
    <section class="container">
        <p class="subtitle has-text-dark">{{subtitle}}</p>
        <section class="columns is-multiline ">
            <section class="column column-fixed" v-for="link in searchBy">
                <a  v-bind:href="link.url" onclick="window.open(this.href); return false;"> 
                    <strong> {{link.title}} </strong>
                        <figure class="image is-96x96">
                            <img class="" v-bind:src="link.img"> 
                        </figure>
                </a>
            </section>
        </section> 
        <hr>
    </section>
 </section>
'


Vue.component('links',{
    props:['links','subtitle', 'search'],
    template:template,
    computed:{
        searchBy:function(){
            if(this.search !==''){
                var _links = this.links.filter((link)=>{
                    return link.title.toLowerCase().search(this.search.toLowerCase()) == 0
                })
                console.log('_links: ', _links);

                (_links.length > 0)? this.$emit('empty',false):this.$emit('empty',true);
                return _links;
            }
            return this.links;
        }
    }

})



new Vue({
    el:"#links",
    data:{
        brand:"Enlaces",
        title:"Acceso Rápido",
        subtitle_private:"Guardián del ALBA - PDVSA",
        subtitle_public:"Públicos",
        links:links,
        links2:links2,
        search:'',
        thereAreLinks:0
    },
    methods:{
        linksEmpty(status){
            console.log('hay resultados: ', status);
            (status)?this.thereAreLinks++:this.thereAreLinks--;
        }
    }
})

contenedor de componentes:
<div class="container">
                <links :links="links" :subtitle="subtitle_private" :search="search" @empty="linksEmpty"></links>
                <links :links="links2" :subtitle="subtitle_public" :search="search" @empty="linksEmpty"></links>
                <h2 class="title has-text-centered" v-if="thereAreLinks > 1">
                    No results: <span class="has-text-danger">{{search}}!</span> 
                </h2>
            </div>

Any idea of the error or a better solution?

javascript html5 vue.js

asked by Antony Petrocelli 08.08.2017 в 18:46

source

1 answer

ReferenceError: Data is not defined How to make a TextView display the contents of an Array if I'm running it with a For

score 0 · Answer 1

Hello Mr. Antony Petrocelli

This question has been around for a while, maybe you have already solved the problem, but anyway ... Better than over and not missing.

The problem happened to me a lot too and the solution is not to do the "issue" in a computed property (computed) it is better in method, then you make reference to that to that function within the computed asi:

Vue.component('links',{
props:['links','subtitle', 'search'],
template:template,

methods:{

vacio:function(estado, valor){

this.$emit(estado,valor);

}

}, 
computed:{
    searchBy:function(){
        if(this.search !==''){
            var _links = this.links.filter((link)=>{
                return link.title.toLowerCase().search(this.search.toLowerCase()) == 0
            })
            console.log('_links: ', _links);

            (_links.length > 0)? 
this.vacio('empty',false):this.vacio('empty',true);
            return _links;
        }
        return this.links;
    }
}

})

I hope it helps you