iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
自我挑戰組

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

(第二十三天)自我練習專案 - 新增卡片

可以新增卡片出來

卡片已經有了一個樣子了,接下來我們來做新增卡片

我們需要在卡片的下方加上一個按鈕

//使用上一個所寫的
<draggable v-model="cards" class="dragArea" :options="{group:'people'}">
    <div v-for="card in cards">
        <div class="card">
            <div class="card-body">
                <div>{{ card.name}}</div>
            </div>
        </div>
    </div>
    //在這裡新增一個按鈕
    <button class="btn btn-primary" v-on:click="addCard()">Add Card</button>
</draggable>

功能部分我們會寫在 methods 裡面

//使用上次的資料的話會有一個 cards 的 list 
methods:{
    addCard:function(){
        //用 push 把資料放進去
        this.cards.push({
            name:'test'
        })
    }
}

這樣是不是就放到 list 裡面了呢!


上一篇
(第二十二天)自我練習專案 - Bootstrap Card 移動
下一篇
(第二十四天)自我練習專案 - column 移動
系列文
使用Vue製作簡單的 WorkBoard (30天)24

尚未有邦友留言

立即登入留言