Javascript 在组件模板中使用Vue.js指令

我是Vue.js新手，尝试创建一个组件，该组件连接到某个全局范围数据中的一个对象，并根据每个对象的具体情况显示不同的内容。我想我误解了指令

v-if

和

v-on

如何在组件模板中工作。（如果这是两个不同的问题，我表示歉意，但我猜我对这两个问题的误解根源是相同的）

下面是一个简单的工作示例。我的目标是让每个

成员

条目仅在关联成员处于活动状态时显示

禁用

按钮，并通过该按钮启用更改其状态。（我还希望将

成员

数据保留在全局范围内，因为在实际工具中，会有附加的逻辑发生在应用程序本身之外）

变量成员=[
{姓名：“Alex”，状态：“On”}，
{姓名：“Bo”，状态：“On”}，
{姓名：“查理”，状态：“关闭”}
]
Vue.component（'member-display'{
道具：['member']，
计算：{
活动：函数（）{
//更复杂事物的占位符
返回this.member.status==“On”；}
},
方法：{
changeStatus:function（）{
this.member.status='Off'；
}
},
//我对这个问题的最佳猜测是：
模板：`
{{member.name}}（{{member.status}）
使残废
`
});
var app=新的Vue({
el:“应用程序”，
数据：{
成员：成员
}
})

---

谢谢你的帮助

按钮的代码

v-if

和

v-on

语法错误。这条线应该是这样的：

<button v-if="active" v-on:click=changeStatus>Disable</button>

禁用

按钮的代码

v-if

和

v-on

语法错误。这条线应该是这样的：

<button v-if="active" v-on:click=changeStatus>Disable</button>

禁用

谢谢！我想我肯定答案更复杂，所以我错过了基本的语法错误。谢谢！我想我肯定答案更复杂，所以我错过了基本的语法错误。