I am currently working on a Vue 'app' within a larger Django application as a means to enhance my understanding of Vue.
My objective is to create unique forms that can be edited independently.
I have been experimenting with this for some time now, trying to determine how to 'disable all forms except the one being edited'.
If a new piece of 'evidence' is added, that specific form should become enabled while the rest remain uneditable.
On the other hand, if an existing evidence is being edited, the 'add evidence' button should no longer be active and only the form being edited should be editable.
This is what my Vue setup looks like - there is a base container (representing the Vue app) and a component (standing for the forms):
var evidenceFormComponent = Vue.component("evidence-form", {
template: "#evidenceFormTemplate",
props: ["csrf_token", "evaluation_id", "element"],
components: {},
data: function () {
console.log("data function");
return {
evidence: getEvidence(),
subdomains: getSubdomains(),
isDisabled: null,
baseUrl: null
};
},
created: function () {
console.log("created_function!");
this.baseUrl = "/api/";
this.subdomainUrl = "/api/";
this.fetchAdditionalEvidence();
this.fetchSubdomainList();
this.isDisabled = true;
},
methods: {
fetchSubdomainList: function () {
// get the evidence if any using a Jquery ajax call
console.log("this should be fetching the subdomains");
return getSubdomains;
},
fetchAdditionalEvidence: function () {
// get the evidence if any using a Jquery ajax call
console.log("this is fetching additional evidence");
return getEvidence();
},
editForm: function (element) {
console.log("editing the form!");
this.isDisabled=false;
},
cancelEdit: function () {
console.log("cancel the edit!");
}
}
});
const vm = new Vue({
el: "#evidenceFormsContainer",
data: function () {
console.log("parent data function");
return {
evidence: getEvidence(),
subdomains: getSubdomains(),
isDisabled: false,
baseUrl: null
};
},
methods: {
addForm: function () {
console.log("adding a child form!");
this.evidence.unshift({});
},
}
});
getEvidence and getSubdomains simply provide generic information as expected from an API at the moment.
I have read recommendations to have all UI elements present in case JavaScript is disabled or similar scenarios. Therefore, I opted to display all 4 buttons and show/hide them based on their disable/enable status.
<button class="btn btn-primary text-white valign-button" v-on:click.prevent="element.isDisabled=false" @click="editForm()">
<i class="far fa-edit"></i> EDIT
</button>
<button :id="'saveButton'+element.id" v-if="element.isDisabled" v-on:click.prevent="element.removedRow=true" class="btn btn-primary text-white valign-button">
<i class="far fa-save"></i> SAVE
</button>
<button class="btn bg-danger text-white valign-button" data-toggle="modal" data-target="#deleteEvidenceModal" v-on:click.prevent>
<i class="fal fa-trash-alt"></i> DELETE
</button>
<button v-if="element.isDisabled" v-on:click.prevent="element.removedRow=true" class="btn bg-secondary text-white valign-button" @click="cancelEdit()">
<i class="fas fa-minus"></i> CANCEL
</button>
The main issue I'm encountering relates to distinguishing between editing an existing element and adding a new one, and properly disabling/enabling all other components accordingly.
To illustrate this clearly, I have created a JSFiddle demonstration.
Upon clicking 'add evidence' in the example, you will notice that while the form remains 'disabled', the ability to click 'edit' persists in the other forms.
I am feeling a bit perplexed. Would it be better to utilize a child component for the buttons? This way, when editing or creating a new form, I could hide all buttons on other instances?
All suggestions are greatly appreciated!