Component takes props of array type, but the value received is an Observer in Vue.js

Asked

Viewed 52 times

0

I have a problem with my project with Vue. when I pass an array as props to my other component, it even gives a console.log() it prints an Observer, but not the array I passed it.

this.values = [1,2,3,4,5];

component:

<spark-line :type="'line'" :data="this.valores" :height="'60'" :width="'100%'" :lineColor="'#1ab394'" :fillColor="'#ffffff'"></spark-line>

But in js the result is an Observer, not an array

js:

export default {

    props:['type','data','height','width','lineColor','fillColor'],
    mounted: function(){
        console.log(this.data);

        $('#sparkline').sparkline(this.data, {
               type: this.type,
               width: this.width,
               height: this.height,
               lineColor: this.lineColor,
               fillColor: this.fillColor
         });

    }
}

Print do console

Does anyone know what it can be?

But if I put it that way it works:

export default {

    props:['type','data','height','width','lineColor','fillColor'],
    mounted: function(){
        console.log(this.data);

        $('#sparkline').sparkline([1,2,3,4], {
               type: this.type,
               width: this.width,
               height: this.height,
               lineColor: this.lineColor,
               fillColor: this.fillColor
         });

    }
}

1 answer

0

Solved, in vdd the problem was in the function call in the component, it mounted the component with the default value passed in the parent component, which initialized with this.valores = [], when mounting the component jQuery was triggered with the empty initialized variable, then the values passed after did not take effect, solved with the watch:

export default {

props:['type','data','height','width','lineColor','fillColor'],
watch: function(){

    $('#sparkline').sparkline(this.data, {
           type: this.type,
           width: this.width,
           height: this.height,
           lineColor: this.lineColor,
           fillColor: this.fillColor
     });

}

}

where the same observes when the props data mute.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.