How to fill out just one list with vuedraggable? - vue.js

I am using the following library
https://sortablejs.github.io/Vue.Draggable/#/custom-clone
specifically using the example:
https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/clone-on-control.vue
<template>
<v-container fluid>
<div class="row">
<div class="col-3">
<h3>Draggable 1</h3>
<draggable
class="row wrap fill-height align-center sortable-list"
style="background: red;"
:list="list1"
:group="{ name: 'people', pull: pullFunction }"
#start="start"
>
<v-card class="list-group-item" v-for="element in list1" :key="element.id">
{{ element.name }}
</v-card>
</draggable>
</div>
<div class="col-3">
<h3>Draggable 2</h3>
<draggable class="dragArea list-group" :list="list2" group="people">
<v-card class="list-group-item" v-for="element in list2" :key="element.id">
{{ element.name }}
</v-card>
</draggable>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
data(){
return {
list1: [
{ name: "Jesus", id: 1 },
{ name: "Paul", id: 2 },
{ name: "Peter", id: 3 }
],
list2: [
{ name: "Luc", id: 5 },
{ name: "Thomas", id: 6 },
{ name: "John", id: 7 }
],
controlOnStart: true
}
},
methods:{
pullFunction() {
return this.controlOnStart ? "clone" : true;
},
start({ originalEvent }) {
this.controlOnStart = originalEvent.ctrlKey;
}
}
}
</script>
What I need to do is fill only a list, that is, from Draggable 1 to Draggable 2, currently it is from Draggable 1 to Draggable 2 and from Draggable 2 to Draggable 1 but I don't need it that way.
Thank you

Related

Make a checkbox selection default out of a group

I want to make the second checkbox always selected by default even on page reload like the image-
The user can select other checkboxes later but by default, the second should be selected always.
Here is the checkbox code-
<template>
<div>
<div class="tw-flex tw-flex-wrap">
<div class="tw-w-full lg:tw-w-1/4">
<collabmed-loading v-if="!initialised">Loading Patient Info...</collabmed-loading>
<reception-patient-info
class="tw-px-0 tw-pt-0"
v-else
:patient-id="admissionRequest.patient_id"
>
</reception-patient-info>
</div>
<div class="tw-w-full lg:tw-w-3/4 lg:tw-pl-5">
<acemed-card>
<acemed-title>
Check In Details
<template #right>
<div v-if="initialised" class="tw-text-lg tw-text-gray-800"><strong>Admission Type:</strong> {{ admissionRequest.admission_type_name }}</div>
</template>
</acemed-title>
<div>
<collabmed-loading v-if="!initialised"></collabmed-loading>
<div v-else>
<div class="tw-flex tw-flex-wrap">
<div class="tw-w-full lg:tw-w-1/2">
<div class="tw-flex tw-flex-wrap tw-justify-between">
<div>
<v-tooltip bottom v-if="msetting('inpatient.inpatient_no_prefix')">
<v-btn flat style="min-width: 50px" slot="activator" class="pull-right pt-3">
{{ msetting('inpatient.inpatient_no_prefix') }}-
</v-btn>
<span>IP Number Prefix</span>
</v-tooltip>
</div>
<div>
<v-text-field
v-model="obj.admission.inpatient_no"
class="mr-2"
label="IP Number"
hint="Possible Format: #######/YY"
></v-text-field>
</div>
<div>
<v-tooltip bottom>
<v-btn
color="primary"
style="min-width: 50px"
slot="activator"
#click="generateIpNumber()"
:loading="generating"
>
<v-icon small>mdi-cached</v-icon>
</v-btn>
<span>Generate IP Number</span>
</v-tooltip>
</div>
</div>
</div>
<div class="tw-w-full tw-pt-5 lg:tw-pt-0 lg:tw-w-1/2 lg:tw-pl-5">
<collabmed-date-time-picker
label="Admission Date"
outline
:maxDate="today"
#input="setAdmissionDate"
></collabmed-date-time-picker>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<div v-if="! obj.admission.external_doctor">
<div v-if="! obj.admission.doctor_id">
<users-search
:roles-like="['doc']"
:label="'Admission Doctor'"
#results="setDoctor"
></users-search>
</div>
<p v-else class="pt-3 pl-3 border-bottom subheading">Doctor:</p>
</div>
<p v-else class="pt-3 pl-3 border-bottom subheading">External Doctor:</p>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5 lg:tw-pl-5">
<div v-if="obj.admission.doctor_id">
<p class="pt-3 pl-3 border-bottom subheading">
{{ obj.admission.doctor_name }}
<v-btn small color="red" icon dark #click="unsetDoctor()">
<v-icon small>delete</v-icon>
</v-btn>
</p>
</div>
<div v-else>
<v-text-field
v-model="obj.admission.external_doctor"
class="mx-2"
label="External Doctor"
hide-details clearable
></v-text-field>
</div>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<v-autocomplete
v-model="obj.admission.ward_id"
:items="wards"
#change="updateBeds()"
item-text="name"
item-value="id"
label="Select a Ward"
hide-details
outline
></v-autocomplete>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5 lg:tw-pl-5">
<div v-if="wardCashCharge" class="pl-3">
<p class="font-weight-bold title">Ward Charges</p>
<p>Cash Charge: <strong>{{ wardCashCharge | numberFormat }}</strong></p>
<p>Insurance Charge: <strong>{{ wardInsuranceCharge | numberFormat }}</strong></p>
</div>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<v-autocomplete
v-model="obj.admission.bed_id"
:disabled="! obj.admission.ward_id"
:items="beds"
item-text="name"
item-value="id"
label="Select a Bed"
hide-details
outline
></v-autocomplete>
<p v-if="overbookingAllowed"><em>Over-booking of beds has been allowed in the system</em></p>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5 lg:tw-pl-5">
<v-autocomplete
v-model="obj.admission.charges"
:disabled="! obj.admission.ward_id"
:items="charges"
item-text="name"
item-value="id"
label="Select Other Charge(s)"
class="ml-2"
hide-details multiple
outline chips
></v-autocomplete>
</div>
<div class="tw-w-full lg:tw-w-1/2 tw-pt-5">
<v-alert :value="true" v-if="errors.any()" type="error" outline>
<div v-html="errors.display()"></div>
</v-alert>
</div>
<div class="tw-w-full tw-pt-5">
<v-btn block dark color="primary" class="mt-4" :loading="saveLoader" #click="save()">
Admit Patient
<v-icon class="pl-2">arrow_right_alt</v-icon>
</v-btn>
</div>
</div>
</div>
</div>
</acemed-card>
</div>
</div>
</div>
</template>
export default {
props: {
admissionRequestId: {
required: true,
}
},
data() {
return {
admissionRequestObj: new AdmissionRequest(),
obj: new Admission(),
wards: null,
saveLoader: false,
beds: [],
charges: [],
wardCashCharge: null,
wardInsuranceCharge: null,
today: moment(new Date()).format('YYYY-MM-DD HH:MM:ss'),
overbookingAllowed: false,
generating: false,
}
},
computed: {
...mapGetters([
'getWards',
]),
admissionRequest() {
return this.admissionRequestObj.selected
},
initialised() {
return this.wards && this.admissionRequest
},
saved() {
return this.obj.saved
},
submitted() {
return this.obj.form.submitted
},
contaminated() {
return this.obj.form.errorDetected;
},
errors() {
return this.obj.form.errors;
},
generatedIpNuber() {
return this.obj.generatedIpNuber
}
},
watch: {
contaminated(val) {
if(val) {
this.saveLoader = false
}
},
submitted(val) {
if(val) {
this.saveLoader = false
}
},
saved(val) {
if(val) {
this.saveLoader = false
this.dialog = false
window.location = route('inpatient.admissions.index').relative()
}
},
admissionRequest(val) {
if(val) {
this.obj.admission.admission_request_id = val.id
this.obj.admission.visit_id = val.visit_id
this.obj.admission.inpatient_no = val.visit.patient.inpatient_no
this.obj.admission.patient_id = val.visit.patient.id
}
},
getWards(val) {
if(val) {
this.wards = this.getWards.data
}
},
generatedIpNuber(val) {
this.generating = false
if(val)
this.obj.admission.inpatient_no = val
}
},
methods: {
...mapActions([
'setWards',
]),
initialise() {
this.admissionRequestObj.find(this.admissionRequestId)
this.setWards()
this.obj.admission.admission_date = this.today
this.overbookingAllowed = this.$options.methods.msetting('inpatient.allow_overbooking_of_wards') == 1
},
updateBeds() {
let ward = _.find(this.wards, {id: this.obj.admission.ward_id})
this.wardCashCharge = ward.cash_cost
this.wardInsuranceCharge = ward.insurance_cost
this.beds = _.map(ward.beds, item => {
let name = "Bed No. " + item.number
! item.is_available ? name += " (Unavailable)" : '';
let disabled = ! item.is_available
this.overbookingAllowed ? disabled = false : null
return {
name: name,
id: item.id,
disabled: disabled
}
})
let firstAvailableBed = _.find(this.beds, { disabled: false })
firstAvailableBed ? this.obj.admission.bed_id = firstAvailableBed.id : null
if(this.charges && this.charges.length && this.charges.length >=2) {
// charges[1] = second item
this.obj.admission.charges.push(this.charges[1].id)
}
this.charges = _.map(ward.charges, item => {
let name = item.name + " - Kshs. " + item.cost;
item.type == 'recurring' ? name += " [RECURRING]" : '';
return {
id: item.id,
name: name
}
})
},
setDoctor(doctor) {
this.obj.admission.doctor_id = doctor.id
this.obj.admission.doctor_name = doctor.full_name
},
unsetDoctor() {
this.obj.admission.doctor_id = null
this.obj.admission.doctor_name = null
},
generateIpNumber() {
this.generating = true
this.obj.generateInpatientNumber()
},
setAdmissionDate(datetime) {
this.obj.admission.admission_date = datetime
},
save() {
this.saveLoader = true
this.obj.save()
}
},
mounted() {
this.initialise()
}
}
</script>
<style scoped lang="scss">
</style>
The api data looks like-
When I select bed, I call a method to fetch the charges. Thats where I have placed the code to select the admission charge where second charge item should always be selected.
If you only want to keep the second item by default selected, then on the mounted hook, just find the second item's id in your charges array, and push this id to your v-model variable (obj.admission.charges) and you should see that the second item is always selected.
Here is the demo-
NOTE-
I used your API data inside the data property of Vue as I can't send requests to your server. I also assumed the possible structure of obj.admission because you didn't mention it.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<v-container>
<v-autocomplete
v-model="obj.admission.charges"
:disabled="!obj.admission.ward_id"
:items="charges"
item-text="name"
item-value="id"
label="Select Other Charge(s)"
class="ml-2"
hide-details
multiple
outlined
chips
>
</v-autocomplete>
</v-container>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
search: null,
obj: {
admission: {
charges: [],
ward_id: "something",
}
},
charges: [
{
id: 2,
name: "Nursing Fee",
cost: "3000.00",
type: "recurring",
created_at: "2022-08-23 08:00",
},
{
id: 31,
name: "Admission Fee",
cost: "once",
type: "3000.00",
created_at: "2022-08-23 08:00",
},
{
id: 32,
name: "Dr. inpatient visit",
cost: "3000.00",
type: "once",
created_at: "2022-08-23 08:00",
},
{
id: 36,
name: "Dr. Anne Masicka",
cost: "3000.00",
type: "once",
created_at: "2022-08-23 08:00",
},
{
id: 29,
name: "Dr. inpatient visit (Dr. Marwa)",
cost: "3000.00",
type: "once",
created_at: "2022-08-23 08:00",
}
]
}
},
mounted() {
if(this.charges && this.charges.length && this.charges.length >=2) {
// charges[1] = second item
this.obj.admission.charges.push(this.charges[1].id)
}
}
})
</script>
</body>
</html>

How to read child component values from a parent method -- vue.js

I have a dynamic list of custom components which are input fields. From my parent vue ,when a button is clicked, how can I write a method that will loop through all the components in my list to get their values?
input-field.vue
<template>
<div>
<input
type="text"
:name="name"
:id="id"
#input="valueChanged"
v-model="val"
/>
</div>
</template>
app.vue
<div>
<ul>
<ul v-for="item in items" :key="item.id">
<my-input :name="item.name" :id="item.id" #input="onChange" />
</ul>
</ul>
<button>READ FIELDS</button>
</div>
</template>
<script>
import myInput from "./components/input-field.vue";
export default {
name: "App",
data() {
return {
items: [
{ id: "3", name: "test3" },
{ id: "4", name: "test4" },
{ id: "5", name: "test5" },
],
};
},
components: {
myInput
},
methods: {
//on button click function here
//how can I get the data from the my-input components
}
};
</script>
There is no need to read the values. Bind them like this: Playground
Read and understand what I have done, do not copy-paste. I have changed some of your code eg. imports
input-field.vue
<template>
{{name}}
<input type="text"
:name="name"
:id="id"
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
props: ["modelValue", "id", "name"],
emits: ["update:modelValue"]
}
</script>
app.vue
<template>
<div v-for="item in items" :key="item.id">
<my-input :name="item.name" :id="item.id" v-model="item.value"></my-input>
</div>
<br />
<b>Values in App.vue</b>
<table border=1>
<tr v-for="item in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
</tr>
</table>
</template>
<script>
import myInput from "./input-field.vue";
export default {
name: "App",
data() {
return {
items: [
{ id: "3", name: "test3", value: "test input" },
{ id: "4", name: "test4", value: "" },
{ id: "5", name: "test5", value: "" },
],
};
},
components: {
myInput
},
};
</script>

Is it possible to make v-for variables dynamic in vue?

<div class="col-3" v-for="n in 5" :key="n">
<h3>Table {{n}}</h3>
<draggable class="list-group" :list="`list${n}`" group="people" #change="log">
<div
class="list-group-item"
v-for="`(element, index) in list${n}`"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
Why can't I set the v-for or :list as a concatenated string? Is there any way around this?
Full code:
<template>
<div class="row">
<component
v-for="(component, index) in components"
:key="index"
:is="component"
/>
<div class="col-3" v-for="n in listNumber" :key="n">
<h3>Table {{n}}</h3>
<draggable class="list-group" :list="list${n}" group="people" #change="log">
<div
class="list-group-item"
v-for="(element, index) in list${n}"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
</draggable>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
let id = 1;
export default {
name: "two-lists",
display: "Two Lists",
order: 1,
components: {
draggable,
list:[],
},
data() {
return {
list1: [
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 },
{ name: "Gerard", id: 4 }
]
},
{
list2: [
{ name: "Juan", id: 5 },
{ name: "Edgard", id: 6 },
{ name: "Johnson", id: 7 }
],
listNumber: 3,
}
},
created(){
console.log(this.list);
},
methods: {
add: function() {
this.list.push({ name: "Juan" });
},
replace: function() {
this.list = [{ name: "Edgard" }];
},
clone: function(el) {
return {
name: el.name + " cloned"
};
},
}
};
</script>
It's a bit difficult to understand exactly what you're trying to do but it looks like you're trying to get a specific list in the v-for loop.
One way to fix your issue would be to nest your lists inside of an object in your data like this:
data() {
return {
listNumber: 3,
lists: {
list1: [
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 },
{ name: "Gerard", id: 4 }
],
list2: [
{ name: "Juan", id: 5 },
{ name: "Edgard", id: 6 },
{ name: "Johnson", id: 7 }
],
},
};
And then in your code you can just do lists[`list${n}`] like this:
<div class="col-3" v-for="n in listNumber" :key="n">
<h3>Table {{n}}</h3>
<draggable class="list-group" :list="lists[`list${n}`]" group="people" #change="log">
<div
class="list-group-item"
v-for="(element, index) in lists[`list${n}`]"
:key="element.name"
>
{{ element.name }} {{ index }}
</div>
There is a lot more refactoring and other cleanup you could (and should) probably do but this should at least get you over this hurdle.

How to disabled v-slot for row in Table Bootstrap Vue

I writing bootstrap component for inline edititng in table
I noticed that slots have priority: cell(%cell%) above cell()
How can I turn off a v-slot:cell(%cell%) for a specific row in a table?
<b-table ...>
<template v-slot:cell()="data">
<b-input
v-if="data.item.editing && data.field.editable"
v-model="tableData[data.index][data.field.key]"
/>
<span v-else>{{data.value}}</span>
</template>
<template
v-for="(_, slot) of $scopedSlots"
v-slot:[slot]="scope"
>
<slot
name="cell()"
v-bind="scope"
/>
</template>
<b-table>
If I'm understanding correctly, you want to be able to have a slot to customize the layout when the field is not being editted.
For this you will have to create your own component, wrapping <b-table>, and create your own slot.
<template v-slot:cell()="data">
<b-input
v-if="data.item.editing && data.field.editable"
v-model="tableData[data.index][data.field.key]"
/>
<span v-else>
<slot :name="`noedit(${data.field.key})`" v-bind="data">
{{ data.value }}
</slot>
</span>
</template>
The above code, will then allow you to use the slot noedit(field_key) (you can change the slot name to whatever you want), to edit the layout when that field is not in an "editing" state.
Example
Vue.component("data-table", {
template: "#data-table",
computed: {
editableFields() {
return this.fields.filter((field) => field.editable);
}
},
data() {
return {
userRow: null
};
},
props: ["items", "fields"],
methods: {
editUser(user) {
let doEdit = true;
if (
this.userRow &&
!confirm("You have unsaved changes, are you sure you want to continue?")
) {
doEdit = false;
}
if (doEdit) {
this.userRow = { ...user };
}
},
saveEdit() {
let user = this.items.find((u) => u.id === this.userRow.id);
Object.assign(user, this.userRow);
this.resetEdit();
},
resetEdit() {
this.userRow = null;
}
}
});
new Vue({
el: "#app",
data() {
return {
fields: [
{ key: "id" },
{ key: "first_name", editable: true },
{ key: "last_name", editable: true },
{ key: "age", editable: true, type: "number", isNumber: true },
{ key: "actions" }
],
items: [
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 56 },
{ id: 2, first_name: "Mads", last_name: "Mikkelsen", age: 39 },
{ id: 3, first_name: "Anders", last_name: "Matthesen", age: 42 }
]
};
}
});
<link href="https://unpkg.com/bootstrap#4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<data-table :items="items" :fields="fields">
<template v-slot:noedit(first_name)="{ value }">
<b class="text-primary">
{{ value }}
</b>
</template>
<template v-slot:cell(id)="{ value }">
<i class="text-danger">{{ value }}</i>
</template>
</data-table>
</div>
<template id="data-table">
<b-table :items="items" :fields="fields">
<template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="s">
<b-input v-if="userRow && userRow.id === s.item.id" v-model="userRow[s.field.key]" :type="s.field.type || 'text'" :number="s.field.isNumber">
</b-input>
<template v-else>
<slot :name="`noedit(${s.field.key})`" v-bind="s">
{{ s.value }}
</slot>
</template>
</template>
<template v-slot:cell(actions)="{ item }">
<b-button-group v-if="userRow && userRow.id === item.id">
<b-btn variant="success" #click="saveEdit">
Save
</b-btn>
<b-btn variant="danger" #click="resetEdit">
Cancel
</b-btn>
</b-button-group>
<b-btn v-else variant="primary" #click="editUser(item)">
Edit
</b-btn>
</template>
<!-- Pass in slots from parent -->
<template v-for="name in Object.keys($scopedSlots)" v-slot:[name]="scope">
<slot :name="name" v-bind="scope"></slot>
</template>
</b-table>
</template>

modal with bootstrap-vue

I need your help solving a problem ...
I'm new to vue and I can't use modal bootstrap-vue.
I need to load a form with the data into my "MODAL" so that I can change it, but I can't load this data by the user ID inside the modal form.
<PageTitle icon="fa fa-cogs" main="Administração" sub="Feriados" />
<b-table hover striped :items="feriados" :fields="fields" small class="mt-0 mb-0">
<template slot="actions" slot-scope="data">
<b-button variant="warning" #click="loadFeriado(data.item)" class="mr-2" size="sm">
<i class="fa fa-pencil"></i>
</b-button>
<b-button variant="info" #click="viewFeriado" class="mr-2" size="sm">
<i class="fa fa-pencil"> Editar</i>
</b-button>
</template>
</b-table>
<div>
<b-modal ref="showFeriado"
title="Visualizar Feriado"
size="xl"
#shown="loadFeriado"
#hidden="reset"
#ok="save"
ok-variant="primary"
cancel-title="Cancelar">
<div>
<input id="feriado-id" type="hidden" v-model="feriado.id"/>
<b-row class="mt-0 mb-0">
<b-col md="6" sm="12">
<b-form-group
label="Data do Feriado:"
label-for="feriado-data"
label-size="sm"
class="mt-0 mb-0">
<v-date-picker v-model="feriado.data" />
</b-form-group>
</b-col>
<b-col md="6" sm="12">
<b-form-group label="Nome:" label-for="feriado-descricao" label-size="sm">
<b-form-input id="feriado-descricao" type="text"
size="sm"
v-model="feriado.descricao" required
:readonly="mode === 'remove'"
placeholder="Informe o nome do Feriado..." />
</b-form-group>
</b-col>
</b-row>
</div>
</b-modal>
</div>
</div>
</template>
<script>
import PageTitle from '../template/PageTitle'
import axios from 'axios'
import { baseApiUrl, showError, userKey } from '#/global'
import moment from 'moment'
export default {
name: 'FeriadoAdmin',
components: {
PageTitle,
moment,
},
data: function() {
return {
mode: 'save',
feriado: {},
feriados: [],
fields: [
{ key: 'id', label: 'Número', sortable: true },
{
key: 'descricao',
label: 'Descrição',
sortable: true
},
{
key: 'data',
label: 'Data',
sortable: true,
formatter: (value, key, item) => {
return moment.utc(value).format('DD/MM/YYYY')
}
},
{
key: 'actions',
label: 'Status'
}
]
}
},
methods: {
viewFeriado () {
this.$refs.showFeriado.show()
},
loadFeriados() {
axios.get(`${baseApiUrl}/feriados`)
.then((list) => {
this.feriados = list.data
})
},
loadFeriado(feriado) {
this.feriado = {
...feriado,
data: moment.utc(feriado.data).toDate()
}
//console.log(feriado)
}
},
mounted() {
this.loadFeriados()
}
}
</script>
<style>
</style>
This console error occurs when attempting to load data into the modal form: