VUEJS 在更新表单值后将我的表单重置为默认值答案

【问题标题】：VUEJS is resetting my form to default value after update on form valuesVUEJS 在更新表单值后将我的表单重置为默认值
【发布时间】：2022-01-26 13:35:40
【问题描述】：

我有一个带有日期选择器输入和复选框的表单。在我更新了 datepicker 的值并选中一个复选框后，datepicker 上的值将返回到其默认值。

谁能帮帮我？

注意：我在 PHP 文件中使用 vue.js

这是我表单上的代码

<form id="Create_Weekly_Payment_Form" action="lib/raw-operations/customer_transactions.php " method="POST" autocomplete="off">
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-6 mt-3">
                <div class="form-group">
                    <label for="Sale_Week">Sale Week</label>
                    <input type="text" class="form-control" id="Sale_Week" placeholder="Enter Sale Week" v-model="form.Sale_Week" required />
                </div>
            </div>
            <div class="col-sm-6 mt-3">
                <div class="form-group">
                    <label for="Pay_Week">Pay Week</label>
                    <input type="text" class="form-control" id="Pay_Week" placeholder="Enter Pay Week" v-model="form.Pay_Week" required />
                </div>
            </div>
        </div>
        <label class="mt-4">Sales Representatives</label>
        <div class="row">
            <div class="col-sm-3 mt-3" v-if="sales_reps.length > 0">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="Select_All" @change="selectAllSalesRep($event)" v-model="All_Selected">
                    <label class="form-check-label" for="Select_All">
                        Select All
                    </label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 mt-3" v-for="(sales_rep, sales_rep_key) in sales_reps">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" :id="'cx_sales_rep_'+sales_rep_key" v-model="form.Selected_Sales_Rep_IDs" :value="sales_rep.Sales_Rep_ID" @change="addSalesRep(sales_rep_key, sales_rep, $event)">
                    <label class="form-check-label" :for="'cx_sales_rep_'+sales_rep_key">
                        {{ sales_rep.Name }}
                    </label>
                </div>
                <div v-for="snumber_input in form.Selected_Sales_Rep" v-html="snumber_input.html" v-if="snumber_input.Sales_Rep_ID === sales_rep.Sales_Rep_ID">
                </div>
            </div>
        </div>
    </div>
</div>

这是我的 VUEJS 代码（不是完整代码，但我认为这很重要）

const vueApp = new Vue({
el: '#vapp',
data () {
    return {
        page_title: 'Create Weekly Payment',
        sales_reps: sales_reps,
        form: {
            Selected_Sales_Rep: [],
            Selected_Sales_Rep_IDs: [],
            Sale_Week: moment().startOf('isoweek').subtract(14, 'days').format('YYYY-MM-DD'),
            Pay_Week: moment().startOf('isoweek').format('YYYY-MM-DD'),
            Payment_Summary_Numbers: [],
        },
        All_Selected: false,
    }
},
methods: {
    addSalesRep(sales_rep_key, sales_rep, $event) {
        this.All_Selected = false;
        if ($event.target.checked) {
            this.addSummaryNumberInput(sales_rep_key, sales_rep);
        } else {
            this.form.Selected_Sales_Rep = $.grep(this.form.Selected_Sales_Rep, function(e){
                return e.Sales_Rep_ID != sales_rep.Sales_Rep_ID;
            });
        }
    },
    selectAllSalesRep($event) {
        this.form.Selected_Sales_Rep_IDs = [];
        this.form.Selected_Sales_Rep = [];
        if (this.All_Selected) {
            this.sales_reps.forEach((sales_rep, sales_rep_key) => {
                this.form.Selected_Sales_Rep_IDs.push(sales_rep.Sales_Rep_ID.toString());
                this.addSummaryNumberInput(sales_rep_key, sales_rep);
            });
        } else {
        }
    },
    addSummaryNumberInput(sales_rep_key, sales_rep) {
    },
    async submitWeeklyPayment() {
    },
},
created() {},

})

【问题讨论】：

标签： php vue.js

【解决方案1】：

Vue 在使用对象时无法检测到属性的添加或删除。你应该使用Vue.Set()，而不是push()。

更多信息请阅读Reactivity in VueJs

【讨论】：

您好！感谢您的回答，但即使我删除了 push()，当我选中复选框时，日期选择器上的值仍会返回默认值。在我在下拉列表中选择了一个值后，这也发生在我的其他页面上。

【解决方案2】：

当 v-for 循环时，您需要设置一个固定的 :key - Vue 无法跟踪是什么，因为 Vue 使用“就地补丁”策略，该策略几乎使用索引作为参考因此，当您的渲染输出依赖于输入值等临时状态时，它会失败。

在您的代码中：v-for="(sales_rep, sales_rep_key) in sales_reps"> 添加 :key 属性并将其绑定到 id。您命名的 sale_rep_key 不是实际的键，而是循环中的索引，不应用作键。我还建议将其命名为简单的索引以避免混淆。

所以你的for循环应该是：

v-for="(sales_rep, index) in sales_reps" :key="sales_rep.Sales_Rep_ID">

【讨论】：