iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
自我挑戰組

使用Vue製作簡單的 WorkBoard (30天)系列 第 19

(第十九天)自我練習專案 - 雙綁定 list

  • 分享至 

  • xImage
  •  

移動到另外一個 list

當我們在做卡片的拖移的時候可能不只要改動同一個 list 我們也需要改動另外一個 list。


那先在 data 裡面新增兩個 list

data: {
    //第一個 list
     list: [{
      name: "John"
    }, {
      name: "Joao"
    }, {
      name: "Jean"
    }],
    //第二個 list 
    list2: [{
      name: "Juan"
    }, {
      name: "Edgard"
    }, {
      name: "Johnson"
    }]
}

id = "myApp" 裡面加上標籤

//
<h2>第一個 list </h2>
<draggable v-model="list" class="dragArea" :options="{group:'people'}">
  <div v-for="element in list">{{element.name}}</div>
</draggable>
<h2>第二個 list </h2>
<draggable v-model="list2" class="dragArea" :options="{group:'people'}">
  <div v-for="element in list2">{{element.name}}</div>
</draggable>

是不是這樣就可以了呢!


上一篇
(第十八天)自我練習專案 - 可以移動的資料
下一篇
(第二十天)自我練習專案 - Column 的移動
系列文
使用Vue製作簡單的 WorkBoard (30天)24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言