VUEJS is resetting my form to default value after update on form values-CodePudding

I have a form with datepicker input and checkboxes. After I have updated the value for datepicker and will check a checkbox, the value on the datepicker returns to its default value.

Can any one help me?

Note: I am using vue.js in a PHP file

Here's the code on my form

<form id="Create_Weekly_Payment_Form" action="lib/raw-operations/customer_transactions.php " method="POST" autocomplete="off">
<div >
    <div >
        <div >
            <div >
                <div >
                    <label for="Sale_Week">Sale Week</label>
                    <input type="text"  id="Sale_Week" placeholder="Enter Sale Week" v-model="form.Sale_Week" required />
                </div>
            </div>
            <div >
                <div >
                    <label for="Pay_Week">Pay Week</label>
                    <input type="text"  id="Pay_Week" placeholder="Enter Pay Week" v-model="form.Pay_Week" required />
                </div>
            </div>
        </div>
        <label >Sales Representatives</label>
        <div >
            <div  v-if="sales_reps.length > 0">
                <div >
                    <input  type="checkbox" id="Select_All" @change="selectAllSalesRep($event)" v-model="All_Selected">
                    <label  for="Select_All">
                        Select All
                    </label>
                </div>
            </div>
        </div>
        <div >
            <div  v-for="(sales_rep, sales_rep_key) in sales_reps">
                <div >
                    <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  :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>

Here is my VUEJS code (not full code but I think this is what matters)

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

})

CodePudding user response：

Vue cannot detect property addition or deletion when using objects. Instead of push() you should use Vue.Set().

For further information read about Reactivity in VueJs

CodePudding user response：

You need to set a fixed :key when v-for loops - Vue isn't able to keep track of what is what because Vue uses an "in-place-patch" strategy which is pretty much using index as a reference so when your render output relies on temporary state like input values, it fails.

More on: https://vuejs.org/v2/guide/list.html#Maintaining-State

In your code: v-for="(sales_rep, sales_rep_key) in sales_reps"> add the :key attribute and bind it to the id. What you have named sale_rep_key is not an actual key but the index in the loop and should not be used as key. I would also suggesting naming that to simply index to avoid confusion.

So your for-loop should be:

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