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来遍历它。然后，我们将给定的文本绑定为按钮内容，并将点击函数与点击事件相关联。

我希望这会有所帮助。