-
-
Notifications
You must be signed in to change notification settings - Fork 133
-
Hi,
I am using CoreUI v4 for VueJS, and while using CCard, it seems like CCard doesn't expose any refs when I try to access it via Vue devtools.
I created an example – one with a simple div, and other with the CCard:
<script setup lang="ts">import { CCard, CButton } from '@coreui/vue-pro';
import { onMounted, ref } from 'vue';
const count = ref(0);
const cardRef = ref(null);
const customCardRef = ref(null);
onMounted(() => {
console.log({ cardRef: cardRef.value, customCardRef: customCardRef.value });
});
</script>
<template>
<CCard ref="cardRef" class="p-5 border-style">
<h1>CoreUI CCard</h1>
<div class="counter">The count is: {{ count }}</div>
<CButton color="primary" @click="count++">Increment Counter</CButton>
</CCard>
<div ref="customCardRef" class="custom-card mt-5 p-5">
<h1>Custom Card</h1>
<div class="counter">The count is: {{ count }}</div>
<CButton color="primary" @click="count++">Increment Counter</CButton>
</div>
</template>
<style scoped>a {
color: #42b983;
}
label {
margin: 0 0.5em;
font-weight: bold;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
color: #304455;
}
.custom-card,
.border-style {
border: 2px solid lightgrey;
}
</style>
This is how it looks like:
These are the refs that each card returns:
- Ref from the CCard:
- Ref from the custom div:
Basically the question is: How do I access the inner ref of the CCard component? Thanks!
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment