v-bind.sync does not pass object as props

Viewed 563

I'm passing an object as a required prop to a component through v-bind.sync but I'm getting an error Missing required prop: "filters"

What am I missing here? It doesn't seem to be working as specified in the documentation:

v-bind.sync="doc":

This passes each property in the doc object (e.g. title) as an individual prop, then adds v-on update listeners for each one.

Here's my component which is called using <ListFilters v-bind.sync="filters" />

<template>
  <div>{{ filters }}</div>
</template>

<script>
export default {
  name: 'ListFilters',
  props: {
    filters: {
      type: Object,
      required: true
    }
  }
}
</script>

Adding a default for filters results in the component using the default instead of the parent value.

1 Answers

As stated in the highlighted passage you provided, any property in filters will be passed to the child component as a property of its own that way. So, it would need to contain another filters property (filters.filters) for it to be accessible in the child component under that name. To pass the parent's property itself, you would use v-bind:filters.sync="filters" instead.

Related