PronounsPage/components/InlineMarkdownInstructions.vue

<template>
    <div class="small text-muted mb-2">
        <div class="form-check form-switch my-1">
            <label>
                <input v-model="enabled" class="form-check-input" type="checkbox">
                <T>profile.markdown.enable</T>
            </label>
            <a href="#" @click.prevent="examples = !examples">
                <Icon v="info-circle" />
                <T>profile.markdown.features</T>
            </a>
        </div>
        <table v-if="examples" class="table table-sm table-striped">
            <tbody>
                <tr v-for="example in $t('profile.markdown.examples')">
                    <th class="fw-normal">
                        {{ example }}
                    </th>
                    <td><Spelling :text="example" markdown /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    props: {
        value: { required: true },
    },
    data() {
        return {
            examples: false,
            enabled: this.value,
        };
    },
    watch: {
        enabled() {
            this.$emit('input', this.enabled);
        },
        value() {
            this.enabled = this.value;
        },
    },
};
</script>