我有一個帶有日期選擇器輸入和復選框的表單。在我更新了 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() {},
})
uj5u.com熱心網友回復：
Vue 在使用物件時無法檢測到屬性的添加或洗掉。而不是push()你應該使用Vue.Set().
有關更多資訊，請閱讀VueJs 中的反應性
uj5u.com熱心網友回復：
當 v-for 回圈時，您需要設定一個固定的 :key - Vue 無法跟蹤是什么，因為 Vue 使用“就地補丁”策略，該策略幾乎使用索引作為參考，所以當你渲染輸出依賴于輸入值等臨時狀態，它會失敗。
更多資訊：https ://vuejs.org/v2/guide/list.html#Maintaining-State
在您的代碼中：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">
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421730.html
標籤：
上一篇：通過fakerlaravel創建一個日期時間，格式為dd-mm-yyyy分時秒，例如：26/01/202220:52:23