-
Notifications
You must be signed in to change notification settings - Fork 1
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
Icon prop is not reactive #1
Comments
Hey, the reason the icon ist not reactive is due to Vue's diffing - components are "cached" without a key. This isn't something that is exclusive to SvgVue, it applies to every dynamic component. From the Vue docs:
Source: https://vuejs.org/v2/api/#key The way to go here is adding a uniqueue A related issue to this topic is also here: danielstgt/laravel-mix-svg-vue#3 (comment) I hope this answers your question, if not please reopen this issue and let me know if there is anything unclear. |
@danielstgt thanks for the answer. Maybe my message was unclear. I don't switch SvgVue components like
but just change SvgVue component's
As you can see above, I reach the reactivity of this prop with some component code changes and it works. So, it's not about Vue reactivity, but about the component realization. I supposed maybe you realized some performance caveats in making property reactive. But maybe you just missed this part? |
Oh, now I've got it! I actually misunderstood your initial issue a bit, but I was able to recreate your case — you are right, there is actually no reason why the I've build the following component: <template>
<div>
<svg-vue :icon="selectedIconName" class="w-10 h-10"></svg-vue>
<div>
<button @click="changeIcon('error')" class="border rounded">Change Icon to Error</button>
<button @click="changeIcon('success')" class="ml-4 border rounded">Change Icon to Success</button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
let selectedIconName = ref('success');
let changeIcon = (newIcon) => selectedIconName.value = newIcon;
return { selectedIconName, changeIcon };
}
}
</script> And the equivalent version for Vue 2: <template>
<div>
<svg-vue :icon="selectedIconName" class="w-10 h-10"></svg-vue>
<div>
<button @click="changeIcon('error')" class="border rounded">Change Icon to Error</button>
<button @click="changeIcon('success')" class="ml-4 border rounded">Change Icon to Success</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedIconName: 'success',
}
},
methods: {
changeIcon(newIcon) {
this.selectedIconName = newIcon;
}
}
}
</script> Initially they didn't work. However, I've upgraded the The reason why I never encountered this problem was the use of A new version of the Thank you 🙏🏼 |
Hi,
Let's say we have a template like this
where the icon is a dynamic value.
Now only the initial value applies.
Works with these changes:
https://github.com/danielstgt/svg-vue3/blob/master/src/svg-vue.vue#L21
Of course, there is a workaround:
But can you explain, please, if there are any reasons (performance-wise?) to not make it reactive?
The same for the component for Vue 2, I use both on different projects.
The text was updated successfully, but these errors were encountered: