Repository: louislam/uptime-kuma
File: src/pages/Details.vue (Vue)

Code before:
                ref="confirmPause"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="pauseMonitor"
            >
                {{ $t("pauseMonitorMsg") }}
            </Confirm>

            <Confirm
                ref="confirmDelete"
                btn-style="btn-danger"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="deleteMonitor"
            >
                <div v-if="monitor && monitor.type === 'group'">
                    <div>{{ $t("deleteGroupMsg") }}</div>
                    <div v-if="hasChildren" class="form-check">
                        <input
                            id="delete-children-checkbox"
                            v-model="deleteChildrenMonitors"
                            class="form-check-input"
                            type="checkbox"
                        >
                        <label class="form-check-label" for="delete-children-checkbox">
                            {{ $t("deleteChildrenMonitors", childrenCount, { n: childrenCount }) }}
                        </label>
                    </div>
                </div>
                <div v-else>
                    {{ $t("deleteMonitorMsg") }}
                </div>
            </Confirm>

            <Confirm
                ref="confirmClearEvents"
                btn-style="btn-danger"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="clearEvents"
            >
                {{ $t("clearEventsMsg") }}
            </Confirm>

            <Confirm
                ref="confirmClearHeartbeats"
                btn-style="btn-danger"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="clearHeartbeats"
            >

Review comment (suggestion):
I would expect something like below

```suggestion
                            {{ $t("deleteChildrenMonitors", childrenCount) }}
```

Code after:
                ref="confirmPause"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="pauseMonitor"
            >
                {{ $t("pauseMonitorMsg") }}
            </Confirm>

            <Confirm
                ref="confirmDelete"
                btn-style="btn-danger"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="deleteMonitor"
            >
                <div v-if="monitor && monitor.type === 'group'">
                    <div>{{ $t("deleteGroupMsg") }}</div>
                    <div v-if="hasChildren" class="form-check">
                        <input
                            id="delete-children-checkbox"
                            v-model="deleteChildrenMonitors"
                            class="form-check-input"
                            type="checkbox"
                        >
                        <label class="form-check-label" for="delete-children-checkbox">
                            {{ $t("deleteChildrenMonitors", childrenCount, { count: childrenCount }) }}
                        </label>
                    </div>
                </div>
                <div v-else>
                    {{ $t("deleteMonitorMsg") }}
                </div>
            </Confirm>

            <Confirm
                ref="confirmClearEvents"
                btn-style="btn-danger"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="clearEvents"
            >
                {{ $t("clearEventsMsg") }}
            </Confirm>

            <Confirm
                ref="confirmClearHeartbeats"
                btn-style="btn-danger"
                :yes-text="$t('Yes')"
                :no-text="$t('No')"
                @yes="clearHeartbeats"
            >