Component receives array type props, but the received value is an observer in Vue.js

Question

Component receives array type props, but the received value is an observer in Vue.js

Navigation

#1 by (0 votes)

0

I have a problem with my project with Vue. when I pass an array as props to my other component, this same one when giving a console.log () it printa an observer, but not the array I passed to it.

this.valores = [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
         });

    }
}

Does anyone know what it can be?

But if I put it like this 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
         });

    }
}

vue.js

asked by anonymous 22.02.2018 / 12:51

1 answer

User Evaluation System with unique notes Mock with MediatR and xUnit

score 0 · Answer 1

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 started with this.valores = [] , hence when mounting the component jQuery was triggered with the initialized variable empty, then the values passed after have had no effect, solved with 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 it observes when the% props changes.