Tổng Hợp

Ràng buộc form input — Vue.js

Ràng buộc form input

Cách sử dụng cơ bản

Bạn có thể sử dụng directive v-model để tạo ràng buộc dữ liệu 2 chiều lên các phần tử form input và textarea. Vue sẽ tự động chọn cách phù hợp để cập nhật phần tử này dựa trên kiểu của input. Có một chút ma thuật, v-model là syntax sugar trong việc cập nhật dữ liệu dựa trên các sự kiện input từ người dùng kèm theo một số trường hợp đặc biệt khác.

v-model sẽ bỏ qua giá trị khởi tạo của các thuộc tính value, checked hoặc selected trong mọi phần tử form. Nó luôn luôn xem data trong đối tượng Vue là nguồn đáng tin cậy duy nhất. Bạn nên khai báo các giá trị khởi tạo trong JavaScript, bên trong option data của component.

Đối với các ngôn ngữ đòi hỏi bộ gõ (IME) (tiếng Trung, tiếng Nhật, Tiếng Hàn v.v.), bạn sẽ nhận thấy rằng v-model không thay đổi trong quá trình biên soạn của IME. Nếu bạn muốn nhận các thay đổi này thì phải sử dụng sự kiện input.

Văn bản

<

input

v-model

=

"message"

placeholder

=

"Nhập thông điệp"

>

<

p

>Thông điệp: {{ message }}

</

p

>

Thông điệp: {{ message }}

Văn bản nhiều dòng

<

span

>Thông điệp có nhiều dòng:

</

span

>

<

p

style

=

"white-space: pre-line;"

>{{ message }}

</

p

>

<

br

>

<

textarea

v-model

=

"message"

placeholder

=

"Nhập văn bản có nhiều dòng"

>

</

textarea

>

Thông điệp có nhiều dòng:

{{ message }}

Nội suy (<textarea>{{text}}</textarea>) không hoạt động với textarea. Hãy sử dụng v-model.

Checkbox

Checkbox đơn, giá trị boolean:

<

input

type

=

"checkbox"

id

=

"checkbox"

v-model

=

"checked"

>

<

label

for

=

"checkbox"

>{{ checked }}

</

label

>

{{ checked }}

Xem thêm :  Ảnh con hổ 3d đẹp nhất ❤️ bộ hình nền cọp 3d chất ngầu

Xem Thêm:  Cách làm cá bống kho tiêu (kho tộ), 10 món ngon từ cá bống, cá bống mú làm món gì ngon nhất

Nhiều checkbox, ràng buộc vào cùng một mảng:

<

div

id

=

'example-3'

>

<

input

type

=

"checkbox"

id

=

"com-chien-toi"

value

=

"Cơm chiên tỏi"

v-model

=

"checkedNames"

>

<

label

for

=

"com-chien-toi"

>Cơm chiên tỏi

</

label

>

<

br

>

<

input

type

=

"checkbox"

id

=

"dot-bi-xao-toi"

value

=

"Đọt bí xào tỏi"

v-model

=

"checkedNames"

>

<

label

for

=

"dot-bi-xao-toi"

>Đọt bí xào tỏi

</

label

>

<

br

>

<

input

type

=

"checkbox"

id

=

"canh-rau-rung"

value

=

"Canh rau rừng"

v-model

=

"checkedNames"

>

<

label

for

=

"canh-rau-rung"

>Canh rau rừng

</

label

>

<

br

>

<

span

>Món đã chọn: {{ checkedNames }}

</

span

>

</

div

>

new

Vue({

el:

'#example-3'

,

data: {


checkedNames: []

}


})


Cơm chiên tỏi

Đọt bí xào tỏi

Canh rau rừng

Món đã chọn: {{ checkedNames }}

Radio

<

input

type

=

"radio"

id

=

"cac-mon-rau"

value

=

"Các món rau"

v-model

=

"picked"

>

<

label

for

=

"cac-mon-rau"

>Các món rau

</

label

>

<

br

>

<

input

type

=

"radio"

id

=

"cac-mon-thit"

value

=

"Các món thịt"

v-model

=

"picked"

>

<

label

for

=

"cac-mon-thit"

>Các món thịt

</

label

>

<

br

>

<

span

>Đã chọn: {{ picked }}

</

span

>

Các món rau

Các món thịt

Đã chọn: {{ picked }}

Select

Select đơn:

<

select

v-model

=

"selected"

>

<

option

disabled

value

=

""

>Vui lòng chọn món

</

option

>

<

option

>Đọt bí xào tỏi

</

option

>

<

option

>Canh bông điên điển

</

option

>

<

option

>Lẩu nấm

</

option

>

</

select

>

<

span

>Món đã chọn: {{ selected }}

</

span

>

new

Vue({

el:

'...'

,

data: {


selected:

''


}


})


Món đã chọn: {{ selected }}

Nếu giá trị khởi tạo của biểu thức trong v-model không khớp với bất kỳ option nào, thì <select> sẽ render ở trạng thái “chưa được chọn”. Trên iOS nó sẽ làm cho người dùng không thể chọn item đầu tiên bởi vì iOS không gọi sự kiện change trong trường hợp này. Do đó chúng tôi khuyên bạn nên thêm một lựa chọn có giá trị rỗng giống như trong ví dụ trên.

Xem Thêm:  Món Ăn Ngon – BÁNH TRUNG THU KHOAI LANG siêu dễ

Xem thêm :  Cách ghép đôi bồ câu, hai cách ghép đôi phổ biến nhất

Select nhiều lựa chọn (được ràng buộc với một mảng):

<

select

v-model

=

"selected"

multiple

>

<

option

>Đọt bí xào tỏi

</

option

>

<

option

>Canh bông điên điển

</

option

>

<

option

>Lẩu nấm

</

option

>

</

select

>

<

br

>

<

span

>Món đã chọn: {{ selected }}

</

span

>

Món đã chọn: {{ selected }}

Render <option> với v-for:

<

select

v-model

=

"selected"

>

<

option

v-for

=

"option in options"

v-bind:value

=

"option.value"

>

{{ option.text }}


</

option

>

</

select

>

<

span

>Giá tiền: {{ selected }}

</

span

>

new

Vue({

el:

'...'

,

data: {


selected:

'50k'

,

options: [


{

text

:

'Đọt bí xào tỏi'

,

value

:

'50k'

},

{

text

:

'Canh bông điên điển'

,

value

:

'30k'

},

{

text

:

'Lẩu nấm'

,

value

:

'45k'

}

]

}


})


Giá tiền: {{ selected }}

Ràng buộc giá trị

Đối với radio, checkbox và select option, v-model thường ràng buộc giá trị kiểu chuỗi tĩnh (hoặc boolean đối với checkbox):


<

input

type

=

"radio"

v-model

=

"picked"

value

=

"a"

>



<

input

type

=

"checkbox"

v-model

=

"toggle"

>



<

select

v-model

=

"selected"

>

<

option

value

=

"abc"

>ABC

</

option

>

</

select

>

Nhưng đôi khi chúng ta muốn ràng buộc giá trị với một thuộc tính động trong đối tượng Vue. Chúng ta có thể sử dụng v-bind để làm điều này. Thêm nữa, sử dụng v-bind còn cho phép ràng buộc giá trị của input với các trị không phải kiểu chuỗi.

Checkbox

<

input


type

=

"checkbox"


v-model

=

"toggle"


true-value

=

"yes"


false-value

=

"no"


>



vm.toggle ===

'yes'



vm.toggle ===

'no'


Các thuộc tính true-valuefalse-value không ảnh hưởng đến thuộc tính value của input, vì trình duyệt không gủi kèm theo các checkbox không được check khi submit form. Để đảm bảo một trong hai giá trị này được submit cùng với form (ví dụ “yes” hoặc “no”), hãy dùng input dạng radio thay thế.

Xem Thêm:  Bì Cuốn Chay – Cách làm BÚN BÌ CHAY chuẩn ngon – Món Ăn Ngon Mỗi Ngày

Xem thêm :  2 cách làm sườn xào dứa (thơm) chua ngọt thơm ngon đậm đà

Radio

<

input

type

=

"radio"

v-model

=

"pick"

v-bind:value

=

"a"

>


vm.pick === vm.a


Select option

<

select

v-model

=

"selected"

>


<

option

v-bind:value

=

"{ number: 123 }"

>123

</

option

>

</

select

>


typeof

vm.selected

vm.selected.number


Modifier

Mặc định, v-model đồng bộ giá trị của input với dữ liệu sau sự kiện input (có ngoại lệ đối với trường hợp bộ gõ như đã nói ở trên). Bạn có thể thêm modifier lazy để đồng bộ sau sự kiện change:


<

input

v-model.lazy

=

"msg"

>

Nếu bạn muốn giá trị từ input được tự động chuyển kiểu về kiểu số, bạn có thể thêm modifier number vào v-model:

<

input

v-model.number

=

"age"

type

=

"number"

>

Điều này rất hữu ích, vì kể cả khi input có type="number" thì giá trị được trả về của nó luôn luôn là chuỗi.

Dùng để tự động loại bỏ khoảng trắng trước và sau giá trị trong input.

<

input

v-model.trim

=

"msg"

>

v-model với Component

Nếu bạn chưa quen với Vue component, bạn có thể bỏ qua phần này.

Không phải lúc nào các kiểu input có sẵn của HTML cũng có thể đáp ứng nhu cầu của bạn. May mắn là các component của Vue cho phép bạn xây dựng các input riêng tái sử dụng được với các hành vi (behavior) được tùy chỉnh hoàn toàn. Các input này thậm chí còn hoạt động với v-model.

https://vi.vuejs.org//images/logo.pnghttps://vi.vuejs.org/v2/guide/forms.html

Xem thêm bài viết thuộc chuyên mục: Ấm Thực Việt
Xem thêm bài viết thuộc chuyên mục: Tổng Hợp

Related Articles

Back to top button