Question

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

父模板的片段：

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

以下是子（结果）模板

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

<script>
import showService from './show-service';

export default {
  components: {
    showService
  },
  props: ['item', 'allClosed'],
  data() {
    return {
      isActive: this.allClosed,
    }
  }
}
</script>

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

当isActive == true结果展开，并且错误崩溃时。我通过设为isActive的道具closeAllServices发起false。

我有一个按钮，点击后会设置closeAllServices = true

我可以看到（通过Chrome中的Vue面板）单击按钮时正在更改道具closeAllServices，但isActive没有变化。

我错过了什么吗？

Answer 1

您只是在数据中初始化isActive。这意味着当房产改变时它不会改变。

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

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

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

如果还有一些其他逻辑可以考虑isActive是真还是假，你可能想要使用计算。

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

子组件数据不具有绑定/反应

1 个答案: