如何處理 Vue 中的保存/編輯按鈕切換？

Question

我有一個 Vue 'app' 之類的。 它只是更大的 Django 應用程序的一部分——但我正在使用它來啟動我的 Vue 學習。

我正在嘗試創建可編輯的獨特 forms。

我一直在搞砸這個問題，試圖弄清楚如何“禁用除正在編輯的 forms 之外的所有 forms”。

如果添加了新的“證據”，則應啟用該表單，而其他表單則不可編輯。

如果正在編輯現有證據，則“添加證據”按鈕不應處於活動狀態，並且只能編輯正在編輯的表單。

我的 Vue 看起來像這樣 - 我有一個基本容器（即 Vue 應用程序）和一個組件（即表單）：

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和getSubdomains只是返回通用的東西 atm，正如我對 API 所期望的那樣。

我讀過最好讓所有 UI 元素都存在，以防有人禁用 JS 或出現奇怪的情況。 所以我想我會創建所有 4 個按鈕，然后根據它們是否應該被禁用來顯示/隱藏。

                        <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>

我遇到的問題是如何判斷我是否正在編輯一個，或者它是否是一個正在添加的新元素並正確禁用所有其他元素。

為了清楚起見，我在實踐中對此做了一個 JSFiddle 。

當您單擊示例中的“添加證據”時，您將看到。 表單仍然“禁用”，其他 forms 仍然可以單擊“編輯”。

我有點失落。 按鈕的子組件會更好嗎？ 那么如果我正在編輯一個表單或創建一個新表單，我可以隱藏所有其他實例上的所有按鈕嗎？

歡迎大家咨詢！

Answer 1

創建對activeForm元素的全局引用：

 data: function () {
        console.log("data function");
        return {
            evidence: getEvidence(),
            subdomains: getSubdomains(),
            isDisabled: null,
            baseUrl: null,
            activeForm: null // this is what we're adding
        };
    },

當您處於循環中時，您知道正在使用的元素的索引。 將其傳遞給您的 function：

@click="editForm(index)"

將該索引分配給您的activeForm變量：

editForm (index) {
  this.activeForm = index
}

更改您的v-if比較器分配以觀察當前索引是否與 activeForm 相同：

v-if="activeForm && activeForm === index

這樣，單個變量負責確定編輯 state。

如果您想在添加時禁用所有 forms，我只需創建另一個名為adding的變量並將其設置為true/false ，就像我們上面對其他函數所做的那樣，並在edit和delete時修改v-if紐扣：

v-if="(activeForm && activeForm === index) && !adding"