Error rendering component

Navigation
2

The page in the browser is only blank and the following error appears in the console: 

Failed to resolve directive: ref

After commenting and uncommenting various parts of my code, I discovered that the page only works right when I comment on this line: 

<h3>{{ status }}</h3>

I'm using Vue.js 2. This status is computed: 

computed: {
    status: function(){
        var count = 0;
        var lista = this.$refs.listaComponent;
        for(var i in lista.contas){
            if (!lista.contas[i].pago) {
                count++;
            }
        }
        return !count ? "Nenhuma conta a pagar." : "Existem " + count + " contas a pagar.";
    }
},

My HTML has this line: 

<lista-component v-ref:lista-component></lista-component>
    
asked by anonymous 30.11.2016 / 19:23

2 answers

1

In Vue.js 2.0 the v-ref directive turned only ref , according to documentation .

This is the right way: 

<lista-component ref="lista-component"></lista-component>
    
28.12.2018 / 17:43
1

Guilherme, I wanted to write my question as a comment but I do not have points for this .. rs

Anyway, how did you declare this component? Did you remember instantiating your Vue obj? Can you send a JSfiddle link?

In the component declaration, you need to instantiate your Vue object, more or less like this: 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
    
30.11.2016 / 19:37
When changing a Model, how to redo Scaffolding? Android - Error with setContentView (R.layout.Principal);