動態更改外部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屬性

回答

相關問題