I am having this issue with a project using Vue 2.6.12. The goal is to open "add-metric" modal when the user closes "close-metric" modal with an option or multi-options selected. These 2 modals are separate components that are a child to the parent component. I am able to close the "close-metric" modal, pass the data into the parent component, flip a boolean called "add" to "true" on the parent component to signal "add-metric" modal to open. However,the "add-metric" modal doesn't open with the :if="add" even when the boolean is true. No error pops up at all.
Here is the "Close-metric" modal Code which builds the request to send over to the Parent Component.
addProjectMetric(projectMetricRequest) {
this.errors = [];
let request = {
projectMetricId: this.$helpers.generateUUID(),
projectMetricGroupId: this.projectMetric.projectMetricGroupId,
projectId: this.projectId,
type: projectMetricRequest.resolutionReason,
name: projectMetricRequest.name,
status: "Open",
tags: projectMetricRequest.tags,
description: projectMetricRequest.description,
dateCreated: projectMetricRequest.dateResolved,
dateIdentified: projectMetricRequest.dateResolved,
createdBy: [projectMetricRequest.createdBy],
assignedToUsers: this.projectMetric.assignedToUsers,
identifiedByRole: projectMetricRequest.identifiedByRole,
timeSaved: projectMetricRequest.timeSaved,
costSaved: projectMetricRequest.costSaved,
participants: projectMetricRequest.participants,
};
this.addProjectMetricFromParent(request);
//request = this.applyOverrides(request);
},
addProjectMetricFromParent(projectMetric) {
this.$emit('add-Resolution-Metric', projectMetric)
this.cancel();
},
cancel() {
this.reset();
this.hide();
},
reset() {
this.errors = [];
// this.form = this.newForm();
this.form = null;
},
hide() {
this.showCloseModal = false;
},
Here is the parent page html with the two components I am closing and trying to open
<CloseProjectMetricModal
v-if="item.action === 'Close'"
:ref="`close-${slugify(addNewText)}-modal`"
:projectId="$route.params.id"
:title="`Close "${limitText(currentMetric)}"`"
mode="Close"
:projectMetric="currentMetric"
:possibleAssignees="item.possibleAssignees"
:addTypes="item.addTypes"
:meetingId="$route.params.meetingId"
@add-Resolution-Metric="openAddModal($event)"
@submit="closeProjectMetricSubmit(item)"
/>
<addProjectMetricModal
v-if="add"
:ref="`add-project-metric-reason-modal`"
:projectId="$route.params.id"
:title="'Add New Metric '"
:mode="'Add'"
:projectMetric="viewingNewMetric"
:possibleAssignees="item.possibleAssignees"
:presetTags="projectSummary.project.presetTags"
:meetingId="$route.params.meetingId"
@submit="addProjectMetricReasonSubmit()">
</addProjectMetricModal>
Here is the code on the Parent component which should be allowing the "add-metric" modal to be seen.
props: {
title: {
type: String,
required: true,
},
addNewText: {
type: String,
},
items: {
type: Array,
required: true,
},
length: {
type: Number,
default: 6,
},
projectSummary: {
type: Object,
},
projectTags: {
type: Array,
},
status: {
type: String,
},
},
data() {
return {
currentMetric: null,
newProjectMetric: null,
add : false,
};
},
openAddModal(newMetric) {
this.newProjectMetric = newMetric;
console.log(this.newProjectMetric)
console.log("hit")
//this.closeProjectMetricSubmit();
this.$nextTick(() => {
this.add = true;
// let modal = document.getElementById(this.metricReason)
// modal.show();
// let ref = `add-project-metric-reason-modal`;
// this.$refs[ref].show();
});
},
Is there something I am missing or not understanding fully with modals? For quick example here are the HTML for the "Close-metric" and "Add-metric" modal.
<template>
<b-modal
:title="title"
v-model="showCloseModal"
:ok-disabled="editDisabled"
@ok.prevent="submit"
size="lg"
@cancel.prevent="cancel"
>
<b-form v-if="form" @submit.prevent>
<b-form-group
v-if="isPresent('name')"
:label="getTitle('name', 'Title')"
label-for="project-metric-name"
invalid-feedback="Please fill out this field"
>
<b-form-input
id="project-metric-name"
v-model.trim="form.name"
required
:disabled="editDisabled"
:autofocus="!showCloseFields"
maxlength="100"
:state="
errors.length == 0
? null
: errors.length == 0
? null
: form.name.length > 0
"
></b-form-input>
</b-form-group>
<!-- This is for only the Closed Section -->
<b-row v-if="!this.meetingId == '' && this.mode=='Close'">
<b-col cols="4" v-if="isPresent('resolutionReason')">
<b-form-group
:label="getTitle('resolutionReason', 'Resolution Reason')"
label-for="project-metric-resolution-reason"
>
<multiselect
v-model="projectMetricResolutions"
:options="otherMetricResolutions"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
placeholder="Pick Resolution Reason"
label="name"
track-by="name"
:preselect-first="false"
class="normalFontSize"
:show-labels="false"
>
<template slot="selection" slot-scope="{ values, isOpen }"
><span
class="multiselect__single"
v-if="values.length && !isOpen"
>{{ values.length }} options selected</span
></template
>
</multiselect>
</b-form-group>
</b-col>
<b-col v-if="isPresent('resolutionLevel')">
<b-form-group
:label="getTitle('resolutionLevel', 'Resolution Level')"
label-for="project-metric-resolution-level"
>
<b-form-select
id="project-metric-resolution-level"
:disabled="editDisabled"
v-model="form.resolutionLevel"
>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</b-form-select>
</b-form-group>
</b-col>
</b-row>
<!-- This is where the Closed Section Ends -->
</b-form>
<MessageBlock :messages="errors"></MessageBlock>
<template v-slot:modal-ok>
<div>
<b-spinner v-if="sending" small label="Spinning" />
<div v-else-if="mode === 'Close'">Close</div>
</div>
</template>
</b-modal>
</template>
export default {
name: "CloseProjectMetricModal",
mixins: [pmMixin],
components: { Multiselect },
props: {
title: { type: String, default: "Edit Action Item" },
mode: { type: String, default: "Edit" },
projectMetric: { type: Object },
projectId: String,
possibleAssignees: { type: Array, default: () => [] },
addTypes: {
type: Array,
default: () => [
"Risk",
"Issue",
"Efficiency",
"Innovation",
"Partnership",
"Sustainability",
],
},
dataTemplate: Object,
presetTags: { type: Array, default: () => [] },
meetingId: { type: String, default: "" },
},
data() {
return {
errors: [],
showCloseModal: false,
sending: false,
returnToView: false,
form: null,
description: "",
filterCriteria: "",
projectMetricResolutions: [],
otherMetricResolutions: [
{ name: "Innovation", type: "Innovation" },
{ name: "Efficiency", type: "Efficiency" },
{ name: "Partnership", type: "Partnership" },
{ name: "Sustainability", type: "Sustainability" },
],
allResolutionReason: "",
todaysNewDate: new Date().toISOString().substr(0, 10),
showAddModal: false,
};
},
}
AddMetricModal
<template>
<b-modal
:title="title"
v-model="showModal"
:ok-disabled="editDisabled"
@ok.prevent="submit"
size="lg"
@cancel.prevent="cancel"
>
<b-form v-if="form" @submit.prevent>
<b-form-group
v-if="isPresent('name')"
:label="getTitle('name', 'Title')"
label-for="project-metric-name"
invalid-feedback="Please fill out this field"
>
<b-form-input
id="project-metric-name"
v-model.trim="form.name"
required
:disabled="editDisabled"
:autofocus="!showCloseFields"
maxlength="100"
:state="
errors.length == 0
? null
: errors.length == 0
? null
: form.name.length > 0
"
></b-form-input>
</b-form-group>
<b-form-group
v-if="isPresent('description')"
:label="getTitle('description')"
label-for="project-metric-description"
>
<b-form-textarea
id="project-metric-description"
v-model.trim="form.description"
:disabled="editDisabled"
maxlength="1000"
rows="3"
></b-form-textarea>
</b-form-group>
<b-row>
<b-col v-if="isPresent('type')">
<b-form-group
:label="getTitle('type')"
label-for="project-metric-type"
>
<div class="select-wrapper">
<b-form-select
id="project-metric-type"
:disabled="editDisabled"
v-model="form.type"
:options="getTypeOptions"
></b-form-select>
</div>
</b-form-group>
</b-col>
<b-col>
<b-button
v-for="(t, i) in unselectedTags"
:key="i"
class="mr-1 button-tag"
@click="addTag(t)"
>
{{ t }}
</b-button>
<b-form-group
v-if="isPresent('tags')"
:label="getTitle('tags')"
label-for="project-metric-tags"
>
<b-form-tags
id="project-metric-tags"
v-model.trim="form.tags"
separator=","
add-button-variant="secondary"
:disabled="editDisabled"
></b-form-tags>
</b-form-group>
</b-col>
</b-row>
</b-form>
<MessageBlock :messages="errors"></MessageBlock>
<template v-slot:modal-ok>
<div>
<b-spinner v-if="sending" small label="Spinning" />
<div v-else-if="mode === 'Add'">Add</div>
<div v-else-if="mode === 'Edit'">Save</div>
<div v-else-if="mode === 'Close'">Close</div>
</div>
</template>
</b-modal>
</template>
import axios from "axios";
import pmMixin from "@/mixins/project-metric-mixin.js";
import Multiselect from "vue-multiselect";
export default {
name: "EditProjectMetricModal",
mixins: [pmMixin],
components: { Multiselect },
props: {
title: { type: String, default: "Edit Action Item" },
mode: { type: String, default: "Edit" },
projectMetric: { type: Object },
projectId: String,
possibleAssignees: { type: Array, default: () => [] },
addTypes: {
type: Array,
default: () => [
"Risk",
"Issue",
"Efficiency",
"Innovation",
"Partnership",
"Sustainability",
],
},
dataTemplate: Object,
presetTags: { type: Array, default: () => [] },
meetingId: { type: String, default: "" },
},
data() {
return {
errors: [],
showModal: false,
sending: false,
returnToView: false,
form: null,
description: "",
filterCriteria: "",
uselessArray: [],
projectMetricResolutions: [],
otherMetricResolutions: [
{ name: "Innovation", type: "Innovation" },
{ name: "Efficiency", type: "Efficiency" },
{ name: "Partnership", type: "Partnership" },
{ name: "Sustainability", type: "Sustainability" },
],
allResolutionReason: "",
todaysNewDate: new Date().toISOString().substr(0, 10)
};
},
Any help or direction would be greatly appreciated !
