Cách tạo form multi field row dùng vue js, sau đây mình sẽ lấy ví dụ thông qua form dưới đây, anh chị thấy rằng chúng ta có thể tạo không giới hạn các mã cổ phiếu và ghi chu bằng cách click vào dấu +, vậy cách làm ra sao ngay sau đây chúng ta cùng tìm hiểu
chúng ta sẽ dùng array và mỗi item array sẽ là 1 object, như vậy anh chị có thể thêm mỗi item vô số field, trong ví dụ chỉ có 3 field
1 2 3 4 5 |
data: () => ({ stocksCodeListAddNew: [ {order: 1, code: '', note: ''} ] }) |
đơn giản là chúng ta sử dụng vòng lặp for vue js để show ra thôi
1 2 3 4 5 6 |
<div v-for="(item, index) in stocksCodeListAddNew" class="stocksCodeAddNewRow"> <div><q-input square outlined v-model="item.code" :label="'Mã cổ phiếu ' + item.order" /></div> <div><q-input square outlined v-model="item.note" :label="'Ghi chú ' + item.order" /></div> <div><q-btn color="blue" @click="addStocksCodeRow(item.order)"><i class="fa fa-plus-circle" aria-hidden="true"></i></q-btn> </div> </div> </div> |
Khi click vào dấu + nó sẽ thêm một item vào array thôi
1 2 3 |
addStocksCodeRow(order){ this.stocksCodeListAddNew.push({order: order + 1, code: '', note: ''}) } |
Rồi đó anh chị, chúc anh chị làm thành công
Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net
Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress