I am currently implementing a third-party Vue component called 'vue-tree-list', which can be found at this link.
Within the component, there is a computed property that analyzes the tree structure to determine the correct placement for inserting a new leaf/node.
In my parent component, I have done the following:
<template>
<div class="py-8 px-5" style="min-height: calc(100vh - (112px + 2.75rem))">
<div class="flex flex-col w-full">
<button class="cursor-pointer relative flex flex-row items-center h-10 focus:outline-none ">
<span class="text-sm tracking-wide truncate ml-6">Add Node</span>
</button>
</div>
<VueTreeList
@click="onClick"
@change-name="onChangeName"
@delete-node="onDel"
@add-node="onClick"
ref="tree"
:model="data"
default-tree-node-name="New Depot"
default-leaf-node-name="New Driver"
v-bind:default-expanded="false"
>
<template v-slot:leafNameDisplay="slotProps">
<a class="text-orange-primary mr-4">
<span>{{ slotProps.model.name }}</span>
</a>
</template>
<span class="icon" slot="addTreeNodeIcon">📂</span>
<span class="icon" @click.stop="test()" slot="addLeafNodeIcon">＋</span>
^INSTEAD OF CALLING THE DEFAULT EVENT 'add-child' WHICH IMMEDIATELY INSERTS A NODE I DIVERTED IT INSTEAD SINCE I WANT THE USER TO INPUT THEIR DATA BEFORE INSERTING INSIDE THE TREE
<span class="icon" slot="editNodeIcon">📃</span>
<span class="icon" slot="delNodeIcon">✂️</span>
<span class="icon" slot="leafNodeIcon">🍃</span>
<span class="icon" slot="treeNodeIcon">📂</span>
</VueTreeList>
<Modal ref="modal" :title="modalTitle" :size="modalSize" :height="modalHeight">
<div v-if="modalContent == 'new'">
<DriverLookUp />
<VehicleLookUp />
</div>
</Modal>
</div>
</template>
<script>
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
import { DriverLookUp, VehicleLookUp } from '@/components/forms/depot'
export default {
components: {
VueTreeList, Modal, DriverLookUp, VehicleLookUp
},
test(){
this.$refs.tree.rootNode() <--- the computed method that I want to access
},
}...
The issue arises when the computed property encounters missing properties error even though it has already been rendered. Is there a way to trigger a child component's computed property?
Here is the link to the child component that I'm working with: link.