I incorporated an external library into my project using Vue3. The component I am utilizing is sourced from a third-party library [Edit: Upon realizing that the GitHub repository for this library is no longer being maintained, I have updated the code to reference the actual implementation in my node_modules.]
<template>
<div class="socket" :class="className" :title="socket.name"></div>
</template>
<script>
import { defineComponent, computed } from "vue";
import { kebab } from "./utils";
export default defineComponent({
props: ["type", "socket"],
setup(props) {
const className = computed(() => {
return kebab([props.type, props.socket.name]);
});
return {
className
};
}
});
</script>
The rendering of this component relies on a Socket object passed as a prop. While observable changes to the name property of the Socket successfully update the title, the corresponding CSS class fails to refresh. Despite attempting $forceRefresh() on the parent component, no updates are observed.
Update: After transferring the rendering logic to my personal repository, I now possess the capability to modify this component as required.
Upon inspection of the updated code snippet, it appears that the issue stems from the computed nature of the class. Is there a method to trigger a forced refresh in this scenario?
Notably, the class only refreshes when I manually reload the code during vue-cli-service serve, without necessitating a full page refresh.
To provide context, the | kebab filter function is defined as follows:
Vue.filter('kebab', (str) => {
const replace = s => s.toLowerCase().replace(/ /g, '-');
return Array.isArray(str) ? str.map(replace) : replace(str);
});
Could filtered attributes behave distinctively in terms of reactivity? This notion seems unlikely.
Contemplating whether the issue pertains to reactivity, I pondered about setting the value with Vue.set. However, my understanding indicates that such actions are redundant in Vue3, especially considering the successful updating of the title content.