[Vuejs]-Correct way to mutate data in slotted child component

by

0👍

It is likely to be a reactivity problem.
Your indicators relies on the order property which you set at setup and seem to change correctly however I don’t see anything to make it reactive for your template.

In Table.vue where you provide it, you might just need to import ref from Vue to make it reactive:

import { ref, provide } from 'vue'

// provide static value
provide('dataUrl', props.dataUrl);

// provide reactive value
const order = ref(props.order)
provide('order', order);

0👍

I realized that the error only occurred in combination with FontAwesome, so I looked further.
By inspecting the code, I found out that FontAwesome manipulates the DOM.

It should have been clear in hindsight but anyway…

The cause
The point is, that when you insert a tag like <i class="fa-solid fa-sort-up"></i> it’s converted to <svg class="svg-inline--fa fa-sort-up" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sort-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"></path></svg>

That’s fine as long as you don’t attach own attributes to the i tag because they get destroyed!
That happened to my v-if. Unfortunately it didn’t silently vanish but it caused some weird errors.

The solution
Wrap any tags which are getting manipulated by a third party (in this case FontAwesome) within a suitable parent tag.
I came up with the following solution:

<span v-if="someCondition">
   <i class="fa-solid fa-sort-up"></i>
</span>

Trivia
Interestingly this error didn’t occur in https://sfc.vuejs.org for some reason. I couldn’t reproduce it in any online tool. The components only crashed in my local dev environment.

Leave a comment