passing the array.length as props in vue js

Question

Parrent component

<progress-bar 
  :maxQuote = "maxQuotes" 
  :currentQuote="allQuotes.length" >
</progress-bar>

data: function() {
  return {
    allQuotes: [],
    maxQuotes: 10
  };
},

Progressbar Component

<template>
  <div class="container">
    <div class="progress">
      <div class="progress-bar" :style="{'width': +90 + '%'}">{{current}} / {{max}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["maxQuote", "currentQuote"],
  data: function() {
    return {
      max: this.maxQuote,
      current: this.currentQuote
    };
  }
};
</script>

Here I want to pass the length of my allQuotes[] array maxQuote prop passed successfully but currentQuote not passed any number , even after array values are increased !

Can you add how you defined the props in progress-bar component? — Raffobaffo
– Raffobaffo, Commented Jul 18, 2020 at 9:48

Raffobaffo · Accepted Answer · 2020-07-18 09:57:36Z

1

You are passing props, but then you assign them to reactive data() and you use those in your template. What happens, is that your props instantiate the data() props, but then they are not changing them anymore when the props change. You should just use the props inside your child component, like so:

<template>
  <div class="container">
    <div class="progress">
      <div class="progress-bar" :style="{'width': +90 + '%'}">{{currentQuote}} / {{maxQuote}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["maxQuote", "currentQuote"],
  data: function() {
    return {
   
    };
  }
};
</script>

edited Jul 18, 2020 at 9:57

answered Jul 18, 2020 at 9:50

Raffobaffo

2,90611 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11092493 Over a year ago

Thanks bro , but I have a question is props are another kind of data() ?

Raffobaffo Over a year ago

Say yes. The huge difference is that props are coming from a parent component (usually from the data of the parent , like in your example) and you can't change them anywhere else that from where they are passed (in the parent). Attempting to change them in the child will cause an error, cause you are breaking the flow

Collectives™ on Stack Overflow

passing the array.length as props in vue js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related