如何在 Vue 中处理 save/edit 按钮切换？

Question

我有一个 Vue 'app' 之类的。它只是更大的 Django 应用程序的一部分 - 但我正在使用它来跳板我的 Vue 学习。

我正在尝试创建可编辑的独特表单。

我已经弄乱了一段时间，想弄清楚如何 'disable all the forms except the one being edited'。

如果添加新的 'evidence'，则应启用该表单，而其他表单不可编辑。

如果正在编辑现有证据，则 'add evidence' 按钮不应处于活动状态，并且只能编辑正在编辑的表单。

我的 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 只是 return 普通的东西，正如我对 API.

的期望

我读到最好让所有 UI 元素都存在，以防有人禁用 JS 或出现异常情况。所以我想我会创建所有 4 个按钮，然后 show/hide 取决于它们是否应该被禁用。

                        <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 of this in practice。

当你点击例子中的'add evidence'时，你会看到。表格仍然'disabled'，其他表格仍然可以点击'edit'。

我有点迷路了。按钮的子组件会更好吗？然后，如果我正在编辑表单或创建新表单，我可以隐藏所有其他实例上的所有按钮吗？

欢迎所有建议！

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
        };
    },

在循环中时，您知道正在使用的元素的索引。将其传递给您的函数：

@click="editForm(index)"

将该索引分配给您的 activeForm 变量：

editForm (index) {
  this.activeForm = index
}

更改您的 v-if 比较器分配以观察当前索引是否与 activeForm 相同：

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

这样，单个变量负责确定编辑状态。

如果你想在添加时禁用所有表单，我只需创建另一个名为 adding 的变量并将其设置为 true/false，就像我们上面对其他函数所做的一样，并修改 edit 和 delete 按钮上的 v-if：

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

如何在 Vue 中处理 save/edit 按钮切换？

How to handle save/edit button toggles in Vue?

javascript

vue.js

vue-component

vuejs2