vue va-checkbox 使用上的問題
目前遇到一個奇怪的 bug
目前我是這樣使用 這是 checkbox A 的 code
<div class="flex xs12 md6 padding10">
<va-badge class="mb-2" color="gray">
<p class="display5">裝備工作情形</p>
</va-badge>
<div class="row">
<div v-for="(item, key) in event.equipment" :key="key">
<div class="flex xs6 md12">
<va-checkbox
v-if="event.equipment[key].check !== undefined"
:label="event.equipment[key].ddmi_Name"
v-model="event.equipment[key].check"
/>
</div>
</div>
</div>
getEquipmentStatus(data) {
let self = this;
// 裝備工作情形
if (data) {
let arr = data.filter(function (item, index, array) {
return item.ddmi_ApplyField === "EquipmentStatus";
});
self.event.equipment = [];
arr.forEach(function (w, i) {
w.check = false;
self.event.equipment.push(w);
});
console.log(self.event.equipment);
}
},
這是 Checkbox B 的 code
<div class="flex xs12 md6 padding10">
<va-badge class="mb-2" color="gray">
<p class="display5">違規分類(可複選)</p>
</va-badge>
<div class="row">
<div v-for="(item, key) in event.violation" :key="key">
<div class="flex xs6 md12">
<va-checkbox
v-if="event.violation[key].check !== undefined"
:label="event.violation[key].ddmi_Name"
v-model="event.violation[key].check"
/>
</div>
</div>
</div>
getDropdownViolationKind(data) {
let self = this;
// 違規分類
if (data) {
let arr = data.filter(function (item, index, array) {
return item.ddmi_ApplyField === "violationKind";
});
self.event.violation = [];
arr.forEach(function (g, i) {
g.check = false;
self.event.violation.push(g);
});
//console.log(self.event.violation);
}
},
Checkbox A 是可以呈現 卻不能點選??
反而會被另外一邊的 checkbox B 給影響
我點 Checkbox B 的選項 會直接改變 Checkbox A
但是在 A 的地方怎麼點選都不能
可是兩邊的 code 不一樣啊@@
你是不是有寫錯?
我翻vuestic UI的文件v-model應該要是一個陣列
同一組要指向同一個v-model...
例如這樣
<div class="flex xs12 md6 padding10">
<va-badge class="mb-2" color="gray">
<p class="display5">違規分類(可複選)</p>
</va-badge>
<div class="row">
<div v-for="(item, key) in event.violation" :key="key">
<div class="flex xs6 md12">
<va-checkbox
:label="item.ddmi_Name"
:array-value="item.ddmi_Name"
v-model="event.violationCheck"
/>
</div>
</div>
</div>
getDropdownViolationKind(data) {
let self = this;
// 違規分類
if (data) {
let arr = data.filter(function (item, index, array) {
return item.ddmi_ApplyField === "violationKind";
});
self.event.violation = [];
self.event.violationCheck = [];
arr.forEach(function (g, i) {
self.event.violation.push(g);
});
//console.log(self.event.violation);
}
},
這個改了之後會連 B 都會有問題@@
所以我才改用現在的方式~
只是很納悶 B 是正常的~ 但是 A 確有問題
而且點選 B 的時候 又會連動到 A ....
ping1000
你array-value
是不是沒有設定啊...
給點debug的建議
把event全部印出來看它裡面到底發生什麼事...
還有v-for是forEach為什麼還要用for迴圈的方式寫..
<div class="flex xs12 md6 padding10">
<va-badge class="mb-2" color="gray">
<p class="display5">違規分類(可複選)</p>
</va-badge>
<div class="row">
<div v-for="(item, key) in event.violation" :key="key">
<div class="flex xs6 md12">
<va-checkbox
:label="item.ddmi_Name"
:array-value="item.ddmi_Name"
v-model="event.violationCheck"
/>
</div>
</div>
</div>
console.log 出來是這樣
會是因為 [[Prototype]]: Array(0) 這邊是 0 的關係嗎?
ping1000
不是
那是原本就是那樣
你這樣根本看不到變化
我是要你看陣列內容...
直接印在html上比較清楚
<pre>{{ event }}</pre>