如何处理Vue中的保存/编辑按钮切换

Question

我有一个Vue‘app’。它只是一个更大的Django应用程序的一部分，但我正在用它来启动我的Vue学习。

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

我已经为此烦恼了一段时间，试图弄清楚如何"禁用除正在编辑的表单外的所有表单"。

如果添加了新的"证据"，则应启用该表单，而其他表单则不可编辑。

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

我的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({});
},
}
});

CCD_ 1和CCD_ 2只是像我从API期望的那样返回通用的东西atm。

我读到过，最好是所有的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。

当您在示例中单击"添加证据"时，您将看到。该表单仍然处于"禁用"状态，其他表单仍然可以单击"编辑"。

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

欢迎所有建议！

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，就像我们上面对其他函数所做的那样，并修改getEvidence1和delete按钮上的v-if：

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