title: How to pass Books array length to the parent component from child component in vue.js?
body: <p>I am developing one page which is responsible from displaying books and the response is coming from backend API, DisplayBooks.vue component is imported inside a Dashboard.vue (parent-component).inside DisplayBooks.vue  it contains books [] array , i want to pass this length to the Dashboard.vue component ,How to acheive this thing please help me to fix this thing..</p>
  <p><code>Dashboard.vue</code></p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;main&quot;&gt;
      &lt;div class=&quot;navbar navbar-default navbar-fixed-top&quot;&gt;
          &lt;div class=&quot;navbar-header&quot;&gt;
              &lt;img src=&quot;../assets/education.png&quot; alt=&quot;notFound&quot; class=&quot;education-image&quot; /&gt;
          &lt;/div&gt;
          &lt;ul class=&quot;nav navbar-nav&quot;&gt;
              &lt;li&gt;
                  &lt;p class=&quot;brand&quot;&gt;Bookstore&lt;/p&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;input-group&quot;&gt;
              &lt;i @click=&quot;handlesubmit();&quot; class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
              &lt;div class=&quot;form-outline&quot;&gt;
                  &lt;input type=&quot;search&quot; v-model=&quot;name&quot; class=&quot;form-control&quot; placeholder='search...' /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;ul class=&quot;nav navbar-nav navbar-right&quot; id=&quot;right-bar&quot;&gt;
              &lt;li&gt;&lt;a&gt; &lt;i class=&quot;far fa-user&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;p class=&quot;profile-content&quot;&gt;profile&lt;/p&gt;
              &lt;li @click=&quot;shownComponent='Cart'&quot;&gt;&lt;a&gt;&lt;i class=&quot;fas fa-cart-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;p class=&quot;cart-content&quot; &gt;cart &lt;span class=&quot;length&quot; v-if=&quot;booksCount&quot;&gt;{{booksCount}}&lt;/span&gt;&lt;/p&gt;
              
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class=&quot;mid-body&quot;&gt;
  &lt;!-- i want to display books length here --&gt;
          &lt;h6&gt;Books&lt;span class=&quot;items&quot;&gt;({{books.length}})&lt;/span&gt;&lt;/h6&gt;
          &lt;select class=&quot;options&quot; @change=&quot;applyOption&quot;&gt;
              &lt;option disabled value=&quot;&quot;&gt;Sort by relevance&lt;/option&gt;
              &lt;option value=&quot;HighToLow&quot;&gt;price:High to Low&lt;/option&gt;
              &lt;option value=&quot;LowToHigh&quot;&gt;price:Low to High&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div v-if=&quot;flam==false&quot;&gt;
          &lt;h2&gt;Hello&lt;/h2&gt;
      &lt;/div&gt;
      &lt;DisplayBooks v-show=&quot;flag==='noOrder' &amp;&amp; shownComponent==='DisplayBooks'&quot; @update-books-count=&quot;(n)=&gt;booksCount=n&quot; /&gt;
      &lt;Cart v-show=&quot; shownComponent==='Cart'&quot;   /&gt;
      &lt;sortBooksLowtoHigh v-show=&quot;flag==='lowToHigh'&quot; @update-books-count=&quot;(n)=&gt;booksCount=n&quot; /&gt;
      &lt;sortBooksHightoLow v-show=&quot;flag==='highToLow'&quot; @update-books-count=&quot;(n)=&gt;booksCount=n&quot; /&gt;
     
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import sortBooksLowtoHigh from './sortBooksLowtoHigh.vue'
  import sortBooksHightoLow from './sortBooksHightoLow.vue'
  import DisplayBooks from './DisplayBooks.vue'
  import Cart from './Cart.vue'
  export default {
      components: {
          DisplayBooks,
          sortBooksLowtoHigh,
          sortBooksHightoLow,
          Cart
      },
      data() {
          return {
              shownComponent:'DisplayBooks',
               booksCount:0,
              flag: 'noOrder',
              brand: 'Bookstore',
              name: '',
              flam: true,
              visible: true,
          }
      },
      methods: {
          flip() {
              this.flam = !this.flam;
          },
          applyOption(evt) {
              if (evt.target.value === &quot;HighToLow&quot;) {
                  this.flag = 'highToLow';
              } else this.flag = 'lowToHigh';
          },
      }
  
  }
  &lt;/script&gt;
  
  </code></pre>
  <p><code>DisplayBooks.vue</code></p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;carddisplay-section&quot;&gt;
      &lt;!-- &lt;div class=&quot;mid&quot;&gt;
        &lt;h6&gt;Books&lt;span class=&quot;items&quot;&gt;({{books.length}})&lt;/span&gt;&lt;/h6&gt;
        &lt;/div&gt; --&gt;
      &lt;div v-for=&quot;book in books&quot; :key=&quot;book.id&quot; class=&quot;card book&quot; &gt;
          &lt;div class=&quot;image-section&quot;  @mouseover=&quot;book.hover = true&quot; @mouseleave=&quot;book.hover = false&quot;&gt;
              &lt;div class=&quot;image-container&quot;&gt;
                  &lt;img  v-bind:src=&quot;book.file&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;title-section&quot; &gt;
              {{book.name}}
          &lt;/div&gt;
          &lt;div class=&quot;author-section&quot;&gt;
              by {{book.author}}
          &lt;/div&gt;
          &lt;div class=&quot;price-section&quot;&gt;
              Rs. {{book.price}}&lt;label class=&quot;default&quot;&gt;(2000)&lt;/label&gt;
             
          &lt;/div&gt;
        
          &lt;div class=&quot;buttons&quot;&gt;
              &lt;div class=&quot;button-groups&quot;  v-if=&quot;!addedBooks.includes(book.id)&quot;&gt;
                  &lt;button type=&quot;submit&quot;  @click=&quot;handleCart(book.id);toggle(book.id);addedBooks.push(book.id)&quot;  class=&quot;AddBag&quot;&gt;Add to Bag&lt;/button&gt;
                  &lt;button  class=&quot;wishlist&quot;&gt;wishlist&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;AddedBag&quot; v-else&gt;
              &lt;button class=&quot;big-btn&quot; @click=&quot;removeFromCart(book.id);addedBooks=addedBooks.filter(id=&gt;id!==book.id)&quot;&gt;Added to Bag&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;description&quot; v-if=&quot;book.hover&quot;&gt;
              &lt;p class=&quot;hovered-heading&quot;&gt;BookDetails&lt;/p&gt;
              {{book.description}}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import service from '../service/User'
  export default {
        mounted() {
          service.userDisplayBooks().then(response =&gt; { 
          let data = response.data;
          data.map(function(obj) {
              obj.hover = false;
              return obj;
          });
  
          this.books.push(...data); 
          return response; 
      })
          },
      data() {
          return {
              isActive:true,
              result: 0,
              authorPrefix: 'by',
              pricePrefix: 'Rs.',
              defaultStrikePrice: '(2000)',
              buttonValue: 'Add to Bag',
              buttonWishlist:'wishlist',
              buttonAddedBag:'Added to Bag',
              flag: true,
              state: true,
              addedBooks:[],
              clickedCard: '',
              books: []   // i want to display this array length
          }
      },
      watch:{
      addedBooks:{
              handler(val){
                 this.$emit('update-books-count',val.length)
                
               },
               deep:true
            }
          },
      methods: {
          toggleClass: function(event){
              this.isActive = !this.isActive;
              return event;
          },
           toggle(id) {
              this.clickedCard = id;
              console.log(this.clickedCard);
            
          },
          flip() {
              this.state = !this.state;
          },
          Togglebtn() {
              this.flag = !this.flag;
          },
    
          handleCart(bookId){
              let userData={
                  id: bookId,
              }
              service.userUpdateCart(userData).then(response=&gt;{
                  return response;
              }).catch(error=&gt;{
                  alert(&quot;error while displaying Books&quot;);
                  return error;
              })
          },
          removeFromCart(bookId){
              let userData={
                  id:bookId,
              }
              service.userRemoveFromCart(userData).then(response=&gt;{
                  return response;
              }).catch(error=&gt;{
                  alert(&quot;error while removing from cart&quot;);
                  return error;
              })
          }
      }
  }
  &lt;/script&gt;
  
  </code></pre>