I'm seeking to grasp the concept of ref/reactivity in Vue3. Unfortunately, due to work constraints, we are unable to utilize any state management libraries.
The objective is to manipulate the number of objects in an array and have the ability to edit the contents of the array. However, I am facing an issue where the view does not update when using reactive. It does display properly with ref([]) but fails to update the row count.
Any insights or feedback would be greatly appreciated. Thank you.
List Component:
<template>
<div>
<p>Where's My Items</p>
<q-virtual-scroll
id="parent-scroll"
class="scroll"
style="height: calc(100vh - 285px);"
:items-size="items.length"
:items-fn="getSnippets"
:virtual-scroll-slice-size="5"
scroll-target="#parent-scroll"
ref="items"
v-slot="{ item, index }">
<q-item :key="item.id" dense class="q-pa-none">
{{ item.id }} - {{ item.d }}-{{index}}
<ParentItem :parentItem='item'></ParentItem>
</q-item>
</q-virtual-scroll>
<p>Count: {{ items.length }} </p>
</div>
</template>
<script lang='ts'>
import { defineComponent, onMounted, watch, reactive } from 'vue';
// import {store} from 'src/controls/store';
// import {controller} from '../controls/control';
import {plane} from '../controls/control';
// import controller from '../controls/store';
import { parentStruct, testStruct } from '../controls/types';
import ParentItem from './parentItem.vue'
export default defineComponent({
name: 'CompositionComponent',
components:{
ParentItem,
},
props: {
aid:{
type: Number,
required:true
}
},
setup(props) {
let items =reactive(Array<parentStruct>());
const {load,controller}=plane()
const {getList}=controller()
const getSnippets = (from: number, size: number) => {
if (items.length === 0) {
console.log('There is literally nothieng to load')
return
} else {
console.log(`getsnippets ${from} ${size}`)
}
return items.slice(from, from+size)
}
onMounted(()=>{
console.log("parent list on mounted")
load()
items = getList(props.aid)??[]
console.log(items)
})
watch(items,()=>{
console.log('items change in watch')
},{ deep : true})
return { items,getSnippets};
},
});
</script>
Child Component:
<template>
<div>
<TxtBoxComponent
:txt="parentItem"
@updateTxt="
(text) => {
modRepl(parentItem, text);
}
"
...
Controls:
import { reactive } from 'vue';
import { store } from './store';
import { parentStruct, testStruct } from './types';
const controller = () => {
// const {store}=storage()
const add = (parent: parentStruct) => {
console.log('control add function');
const items = store.get(parent.aid.toString());
if (items) {
items.splice(items.length,0,parent)
store.set(parent.aid.toString(), items);
console.log(`controller item length = ${items?.length}`);
}
};
const del = (aid: number, id: number) => {
const items = store.get(`${aid}`);
if (items) {
const idx = items.findIndex((item) => {
return item.id == id;
});
items.splice(idx, 1);
}
};
...
import { reactive } from 'vue';
import { parentStruct } from './types'
export const store = reactive(new Map<string,parentStruct[]>())