动态更改外部Vue.js 2.x组件的prop属性

我在我的站点中使用BootstrapVue中的Tabs组件，我想动态更改选项卡组件中的“disabled”prop属性。动态更改外部Vue.js 2.x组件的prop属性

不幸的是，这是不可能的，因为“disabled”被定义为BootstrapVue中的一个prop，而prop属性在Vue.js中可以互换，而数据属性是。

https://bootstrap-vue.github.io/docs/components/tabs

<b-tabs> 
    <b-tab title="first" active> 
    I'm the first fading tab 
    </b-tab> 
    <b-tab title="second"> 
    I'm the second tab content 
    </b-tab> 
    <b-tab title="disabled" disabled> 
    <b-card>I'm the card in tab</b-card> 
    </b-tab>

我觉得这个问题是不特定于该引导标签组件，但它使用外部组件时是一个更广泛的问题。我不想修改原始来源，但我想能够改变它的道具。

我想也许使用这样的东西。但那不行。此外，这不会使其他选项卡更改状态，因为它绑定到基于非索引的属性。

<b-tab title="second" :disabled="$parent.$parent.disabled">

有人知道如何做到这一点吗？

来源

2017-06-13 sparkle

你为什么要用$ parent。$ parent.disabled？您在显示选项卡的组件的data（）中是否没有禁用属性？ – John

我也不明白这个问题。看到我做的简单的小提琴，并告诉我是否还有更多的东西：https://jsfiddle.net/eacc6jpq/ – Cobaltway

有趣。无论如何，我的方法与这个https://jsfiddle.net/kxfzr9so/1/有点相关，我使用自己的组件，因为我的所有标签都需要它们下面的按钮。我在这种情况下简化了。在我自己的项目中，我使用* .Vue组件作为模板，而不是通过它的属性来定义它。本地我得到一个“属性或方法”禁用“没有在实例上定义，而是在渲染过程中引用，请确保在数据选项中声明反应数据属性。”错误。 – sparkle

如果你这样做

<tab-content> 
    <something :disabled="disabled"></something> 
</tab-content>

，则“禁用”值是从您呈现的标签内容组件的组件内，不属于标签内容分量

你不能以你想要的方式做到这一点。

来源

2017-06-13 09:40:37 John

那是我害怕的。所以唯一的解决办法是分叉BootstrapVue，这样我就可以满足我的需求？嗯... – sparkle

你可以使用它，因为它是.. – John

动态更改外部Vue.js 2.x组件的prop属性

回答

相关问题