[Vuejs]-Check props value in child component if available

0👍

You are misunderstanding how components should work in Vue. In short you can understand them by:

parent send props down and child send events up

vue component events

What you are looking for is that whenever your arrayLength updates, you send an event to the parent. Then, it is the responsibility of the parent to handle that event. In this case, the parent would receive the event and store the length of the array.

Parent.vue

<template>
  <div> 
    <child @arrayLenght:update="onArrayLenghtUpdate"/>
  </div>
</template>

<script>
export default {
  data: () => {
    arrayLength: 0,
  },
  methods: {
    onArrayLenghtUpdate(length) {
      this.arrayLength = length;
    }
  }
}
</script>

Child.vue

<template>  ... </template>
<script>
export default {
  data: () => ({
    arrayLength: 0,
  }),
  watch: {
    arrayLenghth: function (newLenght) {
       this.$emit('arrayLenght:update', newLenght);
    }
  }
}
</script>

This is the standard way and extremely useful if your Parent and Child aren’t highly coupled together. If they are dependent on each other (you won’t use Child.vue anywhere else in the app. Just as direct child of Parent.vue) then you can use the inject/provide approach. This approach is beyond the scope of this answer, feel free to read an article on it

Leave a comment