Question

我有一個名爲controls組件：

<li class="controls__item" v-if="options[0].save == 'show'"> 
    <button class="btn" :options[0].saveAttr>Save</button> 
</li> 

我無法呈現在options屬性定義的屬性：

<controls :options='[{ save: "show", saveAttr: "sampleAttr='0' "}]'></controls> 

這是我想要實現：

<button class="btn" sampleAttr='0'>Save</button> 

Answer 1

這不是在Vue中綁定的正確語法。

如果屬性的名稱綁定到是永遠不會改變，你應指定在controls組件名稱：

<li class="controls__item" v-if="options[0].save == 'show'"> 
    <button class="btn" :sampleAttr="options[0].saveAttr">Save</button> 
</li> 

而剛剛更改的選項的值傳遞的saveAttr：

<controls :options='[{ save: "show", saveAttr: "0" }]'></controls> 

---

如果屬性的名稱（或屬性的數量）可能會改變，那麼你應該傳遞一個對象到v-bind指令，像這樣：

<li class="controls__item" v-if="options[0].save == 'show'"> 
    <button class="btn" v-bind="options[0].saveAttrs">Save</button> 
</li> 

然後傳遞一個對象saveAttrs：

<controls :options='[{save : "show", saveAttrs: { sampleAttr: 0 }]'></controls> 

Answer 2

讓我們先從你的testda ta（稍微清理一下）讓我們假設你有兩個按鈕，因爲看起來你稍後想要這樣做。我還不確定節省什麼：「秀」應該做 - 所以我盡我所能給出一個靈活的例子。

[{ 
    'text': 'Save', 
    'click': function() { alert('save'); } 
,{ 
    'text': 'Delete', 
    'click': function() { alert('delete'); } 
}] 

不是可以說你有你的所謂的組件TESTDATA「控制」

<controls :options="[{'text': 'Save','click': function() { alert('save'); },{'text': 'Delete','click': function() { alert('delete'); }}]"> </controls> 

我們可以看到你的控件有一個名爲選項的屬性。所以，你爲你的組件代碼應該是這樣的：

<template> 
    <div class="controls"> 

     <li class="controls__item" v-for="control in options"> 
      <button class="btn" @click="control.click">{{ control.text }}</button> 
     </li> 

    </div> 
</template> 

<script> 
    export default { 
     props: ['options'] 
    } 
</script> 

您需要定義要組分（選項）上綁定的道具。選項現在根據我們的測試日期進行綁定。由於它是一個數組，我們可以使用v-for來遍歷它。然後，我們將給定的文本綁定爲按鈕內容，並將點擊函數與點擊事件相關聯。

我希望這會有所幫助。