Sending a prop using sync and binding it using v-model in child

Question

I'm working with BootstrapVue to get this Accordian like component to work. Part of that entails setting the visibility of a particular item.

Ie,

const obj = {
   someData: [...// properties here],
   visible: false
}

And this gets fed down to an Accordian component like so:

<Accordian :visible.sync="obj.visible" />

And inside Accordian:

props: {
  visible: {
    type: Boolean 
  }
}

THEN... I need to attach it to a b-collapse html tag using v-model because that is how it is suggested on their site. But that throws me this very long list of 'don't modify props directly error'

<b-collapse v-model="visibile" />

Any idea what I am doing wrong?

EDIT: And an important part I forgot to mention, the error only occurs on initial page load. Afterwards the accordian's are fine to use and work (most of the time).

Answer 1

You can't use v-model with a prop because props are meant to be readonly.

Instead, bind <b-collapse>.visible to the visible prop, and emit the update:visible event with the event data whenever <b-collapse>.input event occurs. The update:visible event updates the parent's visible prop via the .sync modifier.

<b-collapse :visible="visible" @input="$emit('update:visible', $event)">

demo