I have this Qsplitter:
<div class="filter-container">
<q-splitter v-model="splitterModel">
<template v-slot:before>
<div>
<q-splitter v-model="splitterModel2">
<template v-slot:before>
<Buttons/>
</template>
<template v-slot:after>
<Buttons/>
</template>
</q-splitter>
</div>
</template>
<template v-slot:after>
<div>
<q-splitter v-model="splitterModel3">
<template v-slot:before>
<Buttons/>
</template>
<template v-slot:after>
<Buttons/>
</template>
</q-splitter>
</div>
</template>
</q-splitter>
</div>
setup() {
const splitterModel = ref(50);
const splitterModel2 = ref(50);
const splitterModel3 = ref(50);
...
return {
splitterModel,
splitterModel2,
splitterModel3,
...
Is there any way to save the splitterModel value on mouse drag or when the splitterModel value is changed? I want to use the values later on the app.
Option 1
This can be achieved by using the splitter event @update:model-value seen in the docs here
Example
<div class="filter-container">
<q-splitter v-model="splitterModel" @update:model-value="handleUpdate">
<template v-slot:before>
<div>
<q-splitter v-model="splitterModel2">
<template v-slot:before>
<Buttons/>
</template>
<template v-slot:after>
<Buttons/>
</template>
</q-splitter>
</div>
</template>
<template v-slot:after>
<div>
<q-splitter v-model="splitterModel3">
<template v-slot:before>
<Buttons/>
</template>
<template v-slot:after>
<Buttons/>
</template>
</q-splitter>
</div>
</template>
</q-splitter>
</div>
setup() {
const splitterModel = ref(50);
const splitterModel2 = ref(50);
const splitterModel3 = ref(50);
function handleUpdate(value) {
// Do what you need to do with value here
console.log(value);
}
...
return {
splitterModel,
splitterModel2,
splitterModel3,
handleUpdate,
...
Option 2
Can also just set up a watcher as explained here