Hi, I’m having troublke trying to use a dynamically rendered fw-select with Vue 3.
I have 2 selects, one is rendered once from a list of groups that is received in a syncrounose way after the component is done with the async setup,
and another select that should be updated based on the selection of the first select.
When I use normal selects for the second select this setup works fine, but with fw-select I am getting the following error in the browser console:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
at insert (runtime-dom.esm-bundler.js:160:16)
at mountElement (runtime-core.esm-bundler.js:4760:9)
at processElement (runtime-core.esm-bundler.js:4689:13)
at patch (runtime-core.esm-bundler.js:4609:21)
at patchKeyedChildren (runtime-core.esm-bundler.js:5412:21)
at patchChildren (runtime-core.esm-bundler.js:5295:17)
at processFragment (runtime-core.esm-bundler.js:5000:17)
at patch (runtime-core.esm-bundler.js:4605:17)
at patchBlockChildren (runtime-core.esm-bundler.js:4920:13)
at patchElement (runtime-core.esm-bundler.js:4828:13)
I am new to Vue in general, have previously worked with Angular so this is very different to me.
No idea how to resolve this, I would hate to have to drop crayons to get this working, hoping someone could point me in the right direction.
I was thinking this might have to do with the way crayons takes the template inside fw-select and injects it into the slot, but I do not know enough to figure this out,
Thinking maybe there is a way to have the entire fw-select rerender when component agents variable is changed.
Hope someone can / is willing to help
Small component reproduction, style omitted:
<template>
<div class="wrapper">
<div class="component">
<div id="ticket-details-group" class="group">
<div id="ticket-details-subgroup" class="form-group flex flex-row subgroup" ref="ticketDetailsSubgroup">
<div class="form-group flex-row">
<fw-select label="Group" required="true" placeholder="Assign to Group" ref="ticketGroupSelect">
<fw-select-option value="-1" selected="true"> (Dont Change) </fw-select-option>
<fw-select-option value="0"> -- </fw-select-option>
<fw-select-option v-for="group in groups" :value="group.id">{{ group.name }}</fw-select-option>
</fw-select>
</div>
<div class="form-group flex-row">
<fw-select label="Agent" required="true" placeholder="Assign to Agent">
<fw-select-option value="-1" selected="true">(Dont Change)</fw-select-option>
<fw-select-option value="0"> -- </fw-select-option>
<fw-select-option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.contact.name }}</fw-select-option>
</fw-select>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import FollowupService from "../services/FollowupService";
export default {
name: "Comp",
methods: {
async onGroupSelectChange(event) {
this.selectedGroup = event.target.value;
this.agents = await this.FollowupService.getAgents(this.selectedGroup);
},
},
async setup() {
return {
FollowupService: await FollowupService,
};
},
data() {
return {
groups: this.FollowupService.getGroups(),
agents: this.FollowupService.getAgents(),
};
},
mounted() {
this.$refs.ticketGroupSelect.addEventListener("fwChange", this.onGroupSelectChange);
},
};
</script>
Small service reproduction:
import FreshdeskService from "./FreshdeskService";
export default (async () => {
// Freshdesk Service mouunted is resolved after the required data is resolved (domain, loggedin user, etc);
await FreshdeskService.mounted();
const groups = await FreshdeskService.freshdeskRequest(`groups`);
const agents = await FreshdeskService.freshdeskRequest(`agents`);
return {
getGroups() {
return groups;
},
async getAgents(groupId = null) {
// some async code to get agents based on selected group
// result has been checked and return value is ok
},
};
})();
