How to handle save/edit button toggles in Vue?

  javascript, vue-component, vue.js, vuejs2

I have a Vue ‘app’ of sorts. It’s just part of a larger Django application – but I’m using this to springboard my Vue learning.

I’m trying to create unique forms that would be editable.

I have been messing about with this for a while trying to figure out how to ‘disable all the forms except the one being edited’.

If a new ‘evidence’ is added, that form should be enabled and the others uneditable.

If an existing evidence is being edited then the ‘add evidence’ button should not be active and only the form being edited should be able to be edited.

My Vue looks like this – I have a base container (that’s the Vue app) and a component (that is 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!");
        }
    }
    //   watch:
});
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 just return generic stuff atm as I would expect from an API.

I have read that it is best to have all UI elements present in case someone has JS disabled or something odd. So I figured I would create all 4 buttons then show/hide depending on if they should be disabled or not.

                        <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 problem I am running into is figuring how to tell if I’m editing one, or if it is a new one being added and properly disabling all the other elements.

For clarity I have made a JSFiddle of this in practice.

When you click ‘add evidence’ in the example, you will see. The form is ‘disabled’ still and the other forms still have the ability to click ‘edit’.

I’m a bit lost. Would a child component for the buttons be better? Then if I’m editing a form or creating a new one, I can hide all the buttons on all the other instances?

All advice welcome!

Source: Ask Javascript Questions

LEAVE A COMMENT