iT邦幫忙

0

vue va-checkbox 使用上的問題

  • 分享至 

  • xImage

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 不一樣啊@@

Homura iT邦高手 1 級 ‧ 2021-10-05 11:34:07 檢舉
你的event.violation和event.equipment來源是不是同一個?
ping1000 iT邦新手 5 級 ‧ 2021-10-05 11:35:37 檢舉
是從 SQL 取出~然後 用 filter 去做判斷
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
Homura
iT邦高手 1 級 ‧ 2021-10-05 11:49:34

你是不是有寫錯?
我翻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);
      }
    },

看更多先前的回應...收起先前的回應...
ping1000 iT邦新手 5 級 ‧ 2021-10-05 13:50:21 檢舉

這個改了之後會連 B 都會有問題@@

所以我才改用現在的方式~

只是很納悶 B 是正常的~ 但是 A 確有問題

而且點選 B 的時候 又會連動到 A ....

Homura iT邦高手 1 級 ‧ 2021-10-05 14:03:38 檢舉

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>
ping1000 iT邦新手 5 級 ‧ 2021-10-05 14:17:45 檢舉

https://imgur.com/uElesba

console.log 出來是這樣
會是因為 [[Prototype]]: Array(0) 這邊是 0 的關係嗎?

Homura iT邦高手 1 級 ‧ 2021-10-05 14:21:10 檢舉

ping1000
不是
那是原本就是那樣
你這樣根本看不到變化
我是要你看陣列內容...
直接印在html上比較清楚

<pre>{{ event  }}</pre>
Homura iT邦高手 1 級 ‧ 2021-10-05 14:35:05 檢舉

ping1000
你該不會有在data的地方有事先定義其中一個吧
怎麼初始型態不一樣

假如你event.equipment沒有事先在vue data定義出來
這樣會錯誤造成不會動喔

ping1000 iT邦新手 5 級 ‧ 2021-10-06 16:31:59 檢舉

嘗試用 {{ event.equipment[key] }} 去查看~
資料正常~

data 那邊應該是沒有定義
因為之前是用 radio 的方式
但是改成 checkbox 就沒有再去用到了

Homura iT邦高手 1 級 ‧ 2021-10-06 17:27:24 檢舉

ping1000
補上data定義有正常運作了嗎??

我要發表回答

立即登入回答