使用 sync 发送 prop 并在 child 中使用 v-model 绑定它

Question

我正在使用 BootstrapVue 来使这个类似 Accordian 的组件正常工作。其中一部分需要设置特定项目的可见性。

即

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

这会像这样反馈到 Accordian 组件：

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

在 Accordian 中：

props: {
  visible: {
    type: Boolean 
  }
}

然后...我需要使用 v-model 将它附加到 b-collapse html 标签，因为这是他们 site 上建议的方式。但这给我带来了很长的“不要直接修改道具错误”列表

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

知道我做错了什么吗？

编辑：我忘记提及的一个重要部分是，该错误仅发生在初始页面加载时。之后手风琴就可以正常使用和工作了（大部分时间）。

Answer 1

您不能将 v-model 与道具一起使用，因为道具是只读的。

相反，将 <b-collapse>.visible 绑定到 visible 属性，并在 <b-collapse>.input 事件发生时使用事件数据发出 update:visible 事件。 update:visible 事件通过 .sync 修饰符更新父级的 visible 属性。

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

demo

使用 sync 发送 prop 并在 child 中使用 v-model 绑定它

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

javascript

vue.js

vuejs2

bootstrap-vue