Vue.js 子组件数据为'；t结合/反应

我有一个子组件，它是一组搜索结果的结果

父模板中的代码段：

<result v-for="result in search_results" :item="result" :closeAllServices="closeAllServices"></result>

下面是子（结果）模板

从“/show service”导入showService；
导出默认值{
组成部分：{
表演服务
},
道具：['item'，'allClosed']，
数据（）{
返回{
isActive:这个。全部关闭，
}
}
}

每个结果都可以通过结果上的按钮展开/折叠。但是，我希望能够关闭父模板中的所有结果

<service v-if="allClosed" :serviceId="item.id"></service>

当

isActive==true

时，结果将展开，而false将折叠。我通过设置为

false

的prop

closeAllServices

启动

isActive

我有一个按钮，单击该按钮可设置

closeAllServices=true

我可以看到（通过Chrome中的Vue面板）在单击按钮时，道具

closeAllServices

正在更改，但

isActive

没有更改

---

我遗漏了什么吗？

您只是在数据中初始化了

isActive

。这意味着当属性更改时，它不会更改

data() {
  return {
    // This only ever executes when the component is created
    isActive: this.allClosed,
  }
}

根据您所展示的所有内容，我可能会直接在模板中引用

allClosed

<service v-if="allClosed" :serviceId="item.id"></service>

---

你是想做“：all closed=“closeAllServices”吗？我想是这样的，我只是确定我以前解决过这个问题。我想我将不得不使用计算属性。谢谢

computed:{
  isActive(){
     return this.allClosed //plus whatever other logic to determine isActive
  }
}