CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
user11092493
user11092493

Reputation:

passing the array.length as props in vue js

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 !

Upvotes: 1

Views: 1846

Answers (1)

Raffobaffo
Raffobaffo

Reputation: 2856

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>

Upvotes: 1

Related Questions