Helpex - Trao đổi & giúp đỡ Đăng nhập

Hướng dẫn Vue 5 - Liên kết dữ liệu biểu mẫu

Hướng dẫn Vue 5 - Liên kết dữ liệu biểu mẫu

Giờ bà ngoại muốn chúng tôi giúp bà lập danh sách tất cả các khách mời tham dự bữa tiệc. Cô ấy có thể sử dụng bút và giấy, nhưng cháu trai của cô ấy là một lập trình viên và cô ấy muốn có một ứng dụng Vue. 

Trong hướng dẫn này, chúng tôi sẽ chấp nhận đầu vào của người dùng (thông tin về khách) và hiển thị nó trong danh sách, tương tự như khi chúng tôi hiển thị danh sách cửa hàng tạp hóa. Tuy nhiên, hôm nay chúng ta sẽ sử dụng   v-model chỉ thị để tạo liên kết dữ liệu hai chiều trên đầu vào biểu mẫu. 

Lưu ý : Bạn có thể tìm thấy các phần một , hai , ba và  bốn  tại các liên kết tương ứng. 

Bạn cũng có thể thích: Bắt đầu với VueJS .

Liên kết dữ liệu hai chiều

 V-model Chỉ thị tự động cập nhật phần tử DOM dựa trên loại đầu vào mà phần tử đó được chỉ định. Nó có thể phân biệt giữa đầu vào, vùng văn bản hoặc chọn một phần tử mà không có bất kỳ thông số kỹ thuật nào từ chúng tôi.

Đây là thông số kỹ thuật từ Granny cho ứng dụng Vue:

  • Thêm tên đầy đủ của người (đầu vào).
  • Thêm kiểm tra xem khách có trả lời hay không (một hộp kiểm)
  • Thêm một lựa chọn cho số bảng (chọn).
  • Cho phép chỉ định bất kỳ yêu cầu ăn kiêng đặc biệt nào (hộp kiểm nhiều).

Hãy bắt đầu bằng cách xác định phần tử đầu vào tên bằng một  v-model chỉ thị.

<div class="container">
    <div class="row">
        <div class="col">
            <div id="app" class="col-md-6 offset-md-3 my-5">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input id="name" name="name" class="form-control" v-model="name"/>
                </div>
                <div class="btn btn-block btn-success">Add {{ name }} to the list</div>
            </div>
        </div>
    </div>
</div>


Chúng tôi cũng sẽ phải xác định một thuộc tính dữ liệu tương ứng

var app = new Vue({
    el: "#app",
    data: {
        name: “"
   },
    methods: {}
})


Với hai phần tử đó, phần tử DOM biểu mẫu của chúng tôi được liên kết với thuộc tính dữ liệu. Khi bất kỳ cái nào trong số đó được cập nhật, cái còn lại cũng vậy. 

Hướng dẫn Vue 5 - Liên kết dữ liệu biểu mẫu

Thêm tên vào danh sách

Lưu ý : Nếu bạn đã lập trình trong React trước đây, có thể bạn đã nhận thấy ở giai đoạn này rằng dữ liệu rất giống với trạng thái của React. 

Bootstrap

Bạn nhận thấy rằng hình thức trên trông khá đẹp. Đó là vì tôi đã nhập Bootstrap vào dự án của chúng tôi. Nếu bạn chưa quen với Bootstrap, vui lòng đọc nhanh về nó ở đây  - nó sẽ thay đổi cách bạn xây dựng trang web của mình. Để nhập vào dự án của bạn, hãy chạy như sau

 npm install bootstrap 


Sau đó, chỉ cần nhập nó vào trang của bạn và Bob là chú của bạn.

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>


Bây giờ, tôi muốn bạn xây dựng biểu mẫu phù hợp với thông số kỹ thuật của Granny. Đây là biểu mẫu đã hoàn thành sẽ trông như thế nào khi bạn hoàn thành.

Hướng dẫn Vue 5 - Liên kết dữ liệu biểu mẫu

Thêm chức năng đặt chỗ trước

Đây là HTML của tôi trông như thế nào. Tôi khuyến khích bạn tự gõ nó từng bước thay vì sao chép khối mã một cách vô ý thức. Tin tưởng tôi, bạn sẽ tốt hơn cho nó. Sẽ không sao nếu mã của bạn khác khi bạn có giao diện tương tự của biểu mẫu. 

 <div class="form-group">
                    <label for="name">Full Name</label>
                    <input id="name" name="name" class="form-control" v-model="name"/>
                </div>

                <div class="form-group form-check">
                    <input type="checkbox" id="checkbox" class="form-check-input" v-model="confirmed"/>
                    <label for="checkbox" class="form-check-label">RSVP</label>

                </div>

                <div class="form-group">
                    <label for="tableNumber" class="form-check-label">Table Number</label>
                    <select id="tableNumber" v-model="tableNumber" class="form-control">
                        <option disabled value="">Table number</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Dietary Requirements</label>
                    <br>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="vegetarian" value="vegetarian"
                               v-model="allergies">
                        <label class="form-check-label" for="vegetarian">Vegetarian</label>
                    </div>
                    <div class="form-check form-check-inline">

                        <input class="form-check-input" type="checkbox" id="vegan" value="Vegan" v-model="allergies">
                        <label class="form-check-label" for="vegan">Vegan</label>

                    </div>
                    <div class="form-check form-check-inline">

                        <input class="form-check-input" type="checkbox" id="dairyFree" value="Dairy-Free"
                               v-model="allergies">
                        <label class="form-check-label" for="dairyFree">Dairy-Free</label>

                    </div>
                    <div class="form-check form-check-inline">

                        <input class="form-check-input" type="checkbox" id="glutenFree" value="Gluten-Free"
                               v-model="allergies">
                        <label class="form-check-label" for="glutenFree">Gluten-Free</label>

                    </div>

                </div>

                <div class="btn btn-block btn-success" >Add {{ name }} to the list</div>


Hiển thị danh sách các yếu tố được thêm vào

Bây giờ chúng ta đã có một biểu mẫu để thu thập tất cả thông tin về từng vị khách quý, có lẽ chúng ta nên lưu trữ nó và hiển thị nó trong một bảng. 

Vì Granny dự kiến ​​sẽ có nhiều khách đến, nên việc sắp xếp từng khách vào một mảng sẽ rất hợp lý. Hãy kết nối một phương thức với nút.

 <div class="btn btn-block btn-success" v-on:click="addGuest">Add {{ name }} to the list</div>


methods: {
    addGuest: function () {
        console.log(`Adding guest ${this.name} ${this.confirmed} ${this.tableNumber} ${this.allergies}`)
        let guest = {name: this.name, confirmed: this.confirmed, tableNumber: this.tableNumber, allergies: this.allergies}
        this.guests.push(guest)

        this.name = ''
        this.confirmed = false
        this.tableNumber = ''
        this.allergies = []
    }
}


Phương thức này tạo một đối tượng khách mới, điền đối tượng đó với đầu vào, sau đó xóa biểu mẫu để cho phép thêm các khách tiếp theo. Xấu! 

Hãy nhớ thêm mảng khách trong dữ liệu.

 guests: [] 

Mọi khách mới được lưu trữ trong mảng này. Hãy sử dụng lệnh  v-for để hiển thị một bảng gồm tất cả khách của chúng ta.

<table class="table table-striped mt-5">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col">Full Name</th>
                        <th scope="col">RSVP</th>
                        <th scope="col">Table</th>
                        <th scope="col">Dietary Requirements</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(guest, index) in guests">
                        <td>{{ guest.name}}</td>
                        <td>{{ guest.confirmed }}</td>
                        <td>{{ guest.tableNumber }}</td>
                        <td>{{ guest.allergies }}</td>
                    </tr>
                    </tbody>
                </table>


Nếu bạn làm theo đúng các bước trên, ứng dụng quản lý khách của bạn sẽ hoạt động tốt. Bạn và Granny đã sẵn sàng để lên kế hoạch thích hợp cho bữa tiệc này. 

Hướng dẫn Vue 5 - Liên kết dữ liệu biểu mẫu

Biểu mẫu và bảng đã hoàn thành

Phần kết luận

Trong hướng dẫn này, chúng tôi đã tìm hiểu về  v-model, là một chỉ thị mạnh mẽ có sẵn cho chúng tôi trong Vue. Sau đó, chúng tôi đã triển khai một ứng dụng đơn giản triển khai tất cả những điều chúng tôi đã học về Vue cho đến nay.

Mã cho hướng dẫn này có sẵn  ở đây


Đọc thêm

  • Bắt đầu với Vue Grid sau 5 phút .
  • Tạo một Application Data Real-Time Sử dụng Vue.js .
  • Phát triển Vue năm 2019: Những điều bạn cần biết .
14 hữu ích 0 bình luận 12k xem chia sẻ

Có thể bạn quan tâm

loading