CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Martin Bean
Martin Bean

Reputation: 39389

Changes to object properties not being reflected in Vue component

I have a Vue component with a single prop, which is an object. When a property in this object is changed, it doesn't seem to be updating in the Vue template.

Here is a simplified version of the component:

<template>
  <p>{{ item.quantity }}</p>
</template>

<script>
  export default {
    props: {
      item: {
        required: true,
        type: Object
      }
    }
  }
</script>

Using vue-devtools in Google Chrome, I can see the quantity property in my item object is being updated, but the template still only renders the default value (1).

Is there something I need to do to make Vue watch nested properties or something?

Upvotes: 3

Views: 5545

Answers (1)

Gokul Chandrasekaran
Gokul Chandrasekaran

Reputation: 545

The issue is that the component is not aware that it should re-render when there is a change in the props. You could use a computed property which returns the props value and use the computed property value.

<template>
  <p>{{ quantity }}</p>
</template>

<script>
  export default {
    props: {
      item: {
        required: true,
        type: Object
      }
    }

    computed: {
        quantity: function() {
            return this.item.quantity
        }
    }
  }
</script>

Upvotes: 1

Related Questions