Передача значения флажка дочернему компоненту в Vue

Question

Я разрабатываю веб-страницу Vue для отображения конвейеров GitLab.У меня есть основной компонент Vue (то есть «Monitor.vue») и дочерние компоненты X, которые отображают расписания конвейеров для каждого из проектов X в моем экземпляре GitLab (называемые «Schedules.vue»).

В «Мониторе» я бы хотел установить флажок, который бы приводил к исчезновению контейнера расписаний для проектов, в которых еще не запланирован конвейер .Вот что я написал для этого:

Monitor.vue:

<template> 
  <input type="checkbox" value="false" v-model="checked">
  Show only projects that have scheduled pipelines
  <div v-if="checked">Checkbox checked!</div>

  <div class="row">
    <div v-for="project in projects" :key="project.id">
      <Schedules :checkBoxChecked="checked"></Schedules>
    </div>
  </div>
</template>

<script>
  import Schedules from "./Schedules.vue";

  export default {
    components: {
      Schedules
    },
    data() {
      return {
        checked: false
      };
    }
  };
<script>

Schedules.vue:

<template>
  <div v-if="checkBoxChecked">
    No scheduled pipelines yet.
  </div>
  <div v-else>
    <!-- Display pipelines here -->
  </div>
</template>

<script>
  export default {
    name: "Schedules",
    props: "checkBoxChecked"
  };
</script>

Теперь значение checked действительноИзменения в Monitor, когда я отмечаю флажок, но когда я пытаюсь передать его дочерним компонентам, значение checkBoxChecked в undefined в веб-консоли.

Что я здесь забыл?

Answer 1

props - это объект в Schedules.vue:

<script>
  export default {
    name: "Schedules",
    props: {
       "checkBoxChecked": Boolean
    }
  };
</script>

Answer 2

Свойство props не является строкой, это массив или объект

export default {
    name: "Schedules",
    props: {
        checkBoxChecked: {
            type: Boolean,
            default: false
        }
    }
};