-
Notifications
You must be signed in to change notification settings - Fork 134
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue3 component can no longer be used directly in another component (v-show) #313
Comments
Just added your example component to the test app I used, updated vue to the latest version (3.0.11) and set vue-fontawesome to 3.0.0-4. I removed So unfortunately I can't reproduce the issue and don't get any errors. This is what I used: <template>
<font-awesome-icon
:fixed-width="!noFixedWidth"
:icon="icon"
:spin="spin"/>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: 'SimpleIcon',
props: {
icon: {
type: [String, Array],
required: true,
},
spin: Boolean,
noFixedWidth: Boolean,
},
});
</script> |
Thank you for trying @otijhuis! I just found it is triggered by the usage of
Adding the wrapping I also confirmed the same error is triggered when using
The issue does not occur when |
I can reproduce it now though not with If I'd had to guess the issue is with the last 2 lines of const vnode = computed(() => renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null)
return () => vnode.value Still curious why I'll have a look and see if I can fix it. |
Seems that was indeed the issue. Not sure if it's the best solution but this works: return () => h(() => vnode.value) Something like that is probably what happens when
I'll see if I can add a few EDIT: Might be best to change the title of the issue to include |
I couldn't create a failing test. Maybe the issue was introduced after 3.0.0 which is the current dev dependency. Created a PR (#315) which should fix the issue. Maybe you could test the PR by checking out the code from my repo, switch to the 3.x branch, and setting the vue-fontawesome version to "file:../some/location/vue-fontawesome". |
@bobvandevijver & @otijhuis --- It seems like the error and warning above are no longer happening when using
What is NOT working is when we use
Wrapping the above code in a
As I mentioned above, I am not getting the same warnings or error messages you were getting. I am getting a new "warning" message in the console when using Warning message in console: So at this time, the PR: Fixes toggling v-show fails with icon and layers text #315 will not be popped into master as it does NOT seem to be addressing the warning or the |
@jasonlundien Thank you for your effort! I just checked my project, and I can no longer reproduce this issue at all. I'm not even seeing the warning you mention in your post, so I guess this is something Vue itself has fixed. I will close this as magically fixed 😄 |
Describe the bug
When using the
<font-awesome-icon>
as a direct child in your template, it will throw an error when its state should be changed.Tagging @otijhuis here has #250 seems to be the root cause.
Reproducible test case
This is my wrapper component, which includes the
:key
workaround:It triggers the following error whenever I update any prop of the
SimpleIcon
property:When I change my component to have a wrapper element around the
font-awesome-icon
, such as a simplespan
, the error disappears and it works as expected. It also no longer needs the:key
hack for the reactivity to work.Expected behavior
There shouldn't be an error.
Desktop (please complete the following information):
Additional context
This error didn't happen with 3.0.0-3
The text was updated successfully, but these errors were encountered: