From eb60e964567928f1bc3a340f9bfa62f087306d91 Mon Sep 17 00:00:00 2001 From: Agus Fikri Suyuthi <40247655+ikrydev@users.noreply.github.com> Date: Thu, 7 Mar 2019 00:38:43 +0700 Subject: [PATCH 1/4] Translating Halaman Form Input Bindings --- src/v2/guide/forms.md | 74 +++++++++++++++++++++---------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index c2784eec33..a095e6b31e 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -4,20 +4,20 @@ type: guide order: 10 --- -## Basic Usage +## Penggunaan Dasar -You can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. +Anda bisa menggunakan `v-model` untuk membuat binding data dua arah di *form input*, *textarea*, dan *select elements*. Hal tersebut secara otomatis akan memilih cara yang tepat untuk memperbarui elemen berdasarkan tipe *input*. Meskipun agak ajaib, `v-model` pada dasarnya adalah *syntax sugar* untuk memperbarui data setiap ada aksi *input* oleh pengguna, Ditambah perawatan khsusus untuk beberapa *edge cases*. -

`v-model` will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the `data` option of your component.

+

`v-model` akan mengabaikan atribut `value`, `checked` atau `selected` awal yang ditemukan pada elemen *form* apapun. Itu akan selalu memperlakukan data *Vue Istance* sebagai sumber kebenaran. Anda harus mendeklarasikan nilai awal pada sisi *Javascript*, Di dalam opsi `data` dari komponen anda.

-`v-model` internally uses different properties and emits different events for different input elements: -- text and textarea elements use `value` property and `input` event; -- checkboxes and radiobuttons use `checked` property and `change` event; -- select fields use `value` as a prop and `change` as an event. +`v-model` secara internal menggunakan properti yang berbeda dan memancarkan kejadian yang berbeda untuk elemen *input* yang berbeda: +- Elemen *text* dan *textarea* menggunakan properti `value` dan aksi `input`; +- *checkboxes* dan *radiobuttons* menggunakan properti `checked` dan aksi `change`; +- *select fields* menggunakan `value` sebagai penyangga dan `change` sebagai sebuah aksi. -

For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead.

+

Untuk bahasa yang memerlukan [IME](https://en.wikipedia.org/wiki/Input_method) (Cina,Jepang,Korea dll), Anda akan melihat bahwa `v-model` tidak diperbarui selama komposisi IME. Jika anda ingin melayani pembaruan ini juga, Gunakan aksi `input` sebagai gantinya.

-### Text +### Teks ``` html @@ -39,7 +39,7 @@ new Vue({ {% endraw %} -### Multiline text +### Teks Multiline ``` html Multiline message is: @@ -66,12 +66,12 @@ new Vue({ {% endraw %} {% raw %} -

Interpolation on textareas (<textarea>{{text}}</textarea>) won't work. Use v-model instead.

+

Interpolasi pada *textareas* (<textarea>{{text}}</textarea>) tidak akan berfungsi. Sebagai gantinya gunakan v-model .

{% endraw %} ### Checkbox -Single checkbox, boolean value: +*Checkbox* tunggal, Nilai boolean: ``` html @@ -92,7 +92,7 @@ new Vue({ {% endraw %} -Multiple checkboxes, bound to the same Array: +*Checkboxes* ganda, Terikat ke *Array* yang sama: ``` html
@@ -170,7 +170,7 @@ new Vue({ ### Select -Single select: +*Select* tunggal: ``` html ` element will render in an "unselected" state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value, as demonstrated in the example above.

+

Jika nilai awal ekspresi `v-model` anda tidak cocok dengan salah satu opsi, Elemen ` @@ -242,7 +242,7 @@ new Vue({ {% endraw %} -Dynamic options rendered with `v-for`: +Opsi dinamis dengan `v-for`: ``` html - + - + ``` -But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values. +Namun terkadang kita mungkin ingin mengikat nilai ke properti dinamis pada Vue instance. Kita dapat menggunakan `v-bind` untuk mencapai itu. Selain itu, menggunakan `v-bind` memungkinkan kita untuk mengikat nilai *input* ke nilai *non-string*. ### Checkbox @@ -320,13 +320,13 @@ But sometimes we may want to bind the value to a dynamic property on the Vue ins ``` ``` js -// when checked: +// ketika dicentang: vm.toggle === 'yes' -// when unchecked: +// ketika tidak dicentang: vm.toggle === 'no' ``` -

The `true-value` and `false-value` attributes don't affect the input's `value` attribute, because browsers don't include unchecked boxes in form submissions. To guarantee that one of two values is submitted in a form (e.g. "yes" or "no"), use radio inputs instead.

+

Atribut `true-value` dan `false-value` tidak memengaruhi atribut *input* `value`, Karena browser tidak menyertakan kotak yang tidak dicentang dalam pengiriman formulir. Untuk menjamin bahwa salah satu dari dua nilai dikirimkan dalam bentuk (misalnya "Ya" or "Tidak"), Gunakan radio sebagai gantinya.

### Radio @@ -335,11 +335,11 @@ vm.toggle === 'no' ``` ``` js -// when checked: +// ketika dicentang: vm.pick === vm.a ``` -### Select Options +### Opsi Select ``` html ``` -This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string. If the value cannot be parsed with `parseFloat()`, then the original value is returned. +Ini sering berguna, Karena bahkan dengan `type="number"`, Nilai elemen *input* HTML selalu mengembalikan sebuah *string*. Jika nilai tidak dapat diuraikan dengan `parseFloat()`, Maka nilai asli dikembalikan. ### `.trim` -If you want whitespace from user input to be trimmed automatically, you can add the `trim` modifier to your `v-model`-managed inputs: +Jika anda ingin spasi kosong dari *input*-an pengguna di pangkas secara otomatis, Anda dapat menambahkan `trim` *modifier* ke *input* yang dikelola `v-model` anda: ```html ``` -## `v-model` with Components +## `v-model` dengan Komponen -> If you're not yet familiar with Vue's components, you can skip this for now. +> Jika anda belum terbiasa dengan komponen Vue, Anda dapat melewati ini untuk saat ini. -HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`! To learn more, read about [custom inputs](components.html#Using-v-model-on-Components) in the Components guide. +Jenis *input* bawaan HTML tidak akan selalu memenuhi kebutuhan anda. Untungnya, Komponen Vue memungkinkan anda membangun *input* yang dapat digunakan kembali dengan perilaku yang sepenuhnya disesuaikan. Input ini bahkan bekerja dengan `v-model`! Untuk mempelajari lebih lanjut, baca tentang [input khsusus](components.html#Using-v-model-on-Components) di panduan komponen. From ecc6503d18288e3d87b092a41b37b35c94e96b07 Mon Sep 17 00:00:00 2001 From: Agus Fikri Suyuthi <40247655+ikrydev@users.noreply.github.com> Date: Thu, 7 Mar 2019 14:11:07 +0700 Subject: [PATCH 2/4] Fix Terjemahan Form Input BIndings --- src/v2/guide/forms.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index a095e6b31e..a97520eeb8 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -6,16 +6,16 @@ order: 10 ## Penggunaan Dasar -Anda bisa menggunakan `v-model` untuk membuat binding data dua arah di *form input*, *textarea*, dan *select elements*. Hal tersebut secara otomatis akan memilih cara yang tepat untuk memperbarui elemen berdasarkan tipe *input*. Meskipun agak ajaib, `v-model` pada dasarnya adalah *syntax sugar* untuk memperbarui data setiap ada aksi *input* oleh pengguna, Ditambah perawatan khsusus untuk beberapa *edge cases*. +Anda bisa menggunakan `v-model` untuk membuat *data binding* dua arah di *form input*, *textarea*, dan *select elements*. Hal tersebut secara otomatis akan memilih cara yang tepat untuk memperbarui elemen berdasarkan tipe *input*. Meskipun agak ajaib, `v-model` pada dasarnya adalah *syntax sugar* untuk memperbarui data setiap ada aksi *input* oleh pengguna, Ditambah perawatan khsusus untuk beberapa *edge cases*. -

`v-model` akan mengabaikan atribut `value`, `checked` atau `selected` awal yang ditemukan pada elemen *form* apapun. Itu akan selalu memperlakukan data *Vue Istance* sebagai sumber kebenaran. Anda harus mendeklarasikan nilai awal pada sisi *Javascript*, Di dalam opsi `data` dari komponen anda.

+

`v-model` akan mengabaikan atribut `value`, `checked` atau `selected` awal yang ditemukan pada elemen *form* manapun. Hal tersebut akan selalu memperlakukan data *Vue Istance* sebagai *source of truth*. Anda harus mendeklarasikan nilai awal pada sisi *Javascript*, Di dalam opsi `data` dari komponen Anda.

-`v-model` secara internal menggunakan properti yang berbeda dan memancarkan kejadian yang berbeda untuk elemen *input* yang berbeda: +`v-model` secara internal menggunakan properti yang berbeda dan melakukan *emits* pada suatu *event* yang berbeda untuk elemen *input* yang berbeda: - Elemen *text* dan *textarea* menggunakan properti `value` dan aksi `input`; - *checkboxes* dan *radiobuttons* menggunakan properti `checked` dan aksi `change`; -- *select fields* menggunakan `value` sebagai penyangga dan `change` sebagai sebuah aksi. +- *select fields* menggunakan `value` sebagai *prop* dan `change` sebagai sebuah aksi. -

Untuk bahasa yang memerlukan [IME](https://en.wikipedia.org/wiki/Input_method) (Cina,Jepang,Korea dll), Anda akan melihat bahwa `v-model` tidak diperbarui selama komposisi IME. Jika anda ingin melayani pembaruan ini juga, Gunakan aksi `input` sebagai gantinya.

+

Jika Anda memakai bahasa [IME](https://en.wikipedia.org/wiki/Input_method) (Cina,Jepang,Korea dll), Anda akan melihat bahwa `v-model` tidak diperbarui selama komposisi IME. Jika Anda ingin melayani pembaruan ini juga, Gunakan aksi `input` sebagai gantinya.

### Teks @@ -209,7 +209,7 @@ new Vue({ {% endraw %} -

Jika nilai awal ekspresi `v-model` anda tidak cocok dengan salah satu opsi, Elemen `` akan merender dalam keadaan "tidak dipilih". Di iOS ini akan menyebabkan pengguna tidak dapat memilih item pertama karena iOS tidak memecat perubahan aksi dalam kasus ini. Oleh karena itu disarankan menyediakan opsi yang dinonaktifkan dengan nilai kosong, Seperti yang ditunjukkan pada contoh diatas.

Select ganda (terikat ke *Array*): @@ -367,17 +367,17 @@ Secara default, `v-model` menyinkronkan *input* dengan data setelah setiap aksi ### `.number` -Jika anda ingin *input* pengguna diketik secara otomatis sebagai angka, Anda dapat menambahkan `number` *modifier* ke *input* yang dieklola `v-model` anda: +Jika Anda ingin *input* pengguna diketik secara otomatis sebagai angka, Anda dapat menambahkan `number` *modifier* ke *input* yang dieklola oleh `v-model` Anda: ``` html ``` -Ini sering berguna, Karena bahkan dengan `type="number"`, Nilai elemen *input* HTML selalu mengembalikan sebuah *string*. Jika nilai tidak dapat diuraikan dengan `parseFloat()`, Maka nilai asli dikembalikan. +Hal ini seringkali berguna, Karena, bahkan hanya dengan `type="number"`, nilai elemen *input* HTML selalu dikembalikan dalam bentuk *string*. Jika nilai tidak dapat diuraikan dengan `parseFloat()`, maka nilai asli yang akan dikembalikan. ### `.trim` -Jika anda ingin spasi kosong dari *input*-an pengguna di pangkas secara otomatis, Anda dapat menambahkan `trim` *modifier* ke *input* yang dikelola `v-model` anda: +Jika Anda ingin menyisipkan spasi kosong dari *input*-an pengguna yang bisa di pangkas secara otomatis, Anda bisa menambahkan `trim` *modifier* ke *input* yang dikelola oleh `v-model` Anda: ```html @@ -385,6 +385,6 @@ Jika anda ingin spasi kosong dari *input*-an pengguna di pangkas secara otomatis ## `v-model` dengan Komponen -> Jika anda belum terbiasa dengan komponen Vue, Anda dapat melewati ini untuk saat ini. +> Jika Anda belum terbiasa dengan komponen Vue, Anda boleh melewati bagian ini. -Jenis *input* bawaan HTML tidak akan selalu memenuhi kebutuhan anda. Untungnya, Komponen Vue memungkinkan anda membangun *input* yang dapat digunakan kembali dengan perilaku yang sepenuhnya disesuaikan. Input ini bahkan bekerja dengan `v-model`! Untuk mempelajari lebih lanjut, baca tentang [input khsusus](components.html#Using-v-model-on-Components) di panduan komponen. +Jenis *input* bawaan HTML tidak akan selalu memenuhi kebutuhan Anda. Untungnya, Komponen Vue memungkinkan Anda untuk membuat *input* yang bisa digunakan kembali dengan perilaku yang sepenuhnya bisa disesuaikan. Input ini bahkan bisa bekerja dengan `v-model`! Untuk mempelajari lebih lanjut, baca tentang [input khsusus](components.html#Using-v-model-on-Components) di panduan komponen. From db65f63b7ccc9885b8348082cfc2781bc4ce1f6e Mon Sep 17 00:00:00 2001 From: Agus Fikri Suyuthi <40247655+ikrydev@users.noreply.github.com> Date: Thu, 7 Mar 2019 14:18:04 +0700 Subject: [PATCH 3/4] Done --- src/v2/guide/forms.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index a97520eeb8..f116af8695 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -92,7 +92,7 @@ new Vue({ {% endraw %} -*Checkboxes* ganda, Terikat ke *Array* yang sama: +*Checkboxes* lebih dari satu, Terikat ke *Array* yang sama: ``` html
@@ -211,7 +211,7 @@ new Vue({

Jika nilai awal ekspresi `v-model` Anda tidak cocok dengan salah satu opsi, Elemen ` From dc5cf7be37b34c69f3283db73922f9add5773e6c Mon Sep 17 00:00:00 2001 From: Agus Fikri Suyuthi <40247655+ikrydev@users.noreply.github.com> Date: Thu, 7 Mar 2019 17:14:42 +0700 Subject: [PATCH 4/4] Membuat terjemahan lebih natural. --- src/v2/guide/forms.md | 59 +++++++++++++++++++++---------------------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md index f116af8695..7a771b5260 100644 --- a/src/v2/guide/forms.md +++ b/src/v2/guide/forms.md @@ -20,20 +20,20 @@ Anda bisa menggunakan `v-model` untuk membuat *data binding* dua arah di *form i ### Teks ``` html - -

Message is: {{ message }}

+ +

Pesan nya adalah : {{ pesan }}

``` {% raw %}
- -

Message is: {{ message }}

+ +

Pesannya adalah: {{ pesan }}

@@ -42,24 +42,24 @@ new Vue({ ### Teks Multiline ``` html -Multiline message is: -

{{ message }}

+Pesan dengan baris lebih dari satu : +

{{ pesan }}


- + ``` {% raw %}
- Multiline message is: -

{{ message }}

+ Pesan dengan baris lebih dari satu : +

{{ pesan }}


- +
@@ -96,14 +96,14 @@ new Vue({ ``` html
- + - + - +
- Checked names: {{ checkedNames }} + Nama yang di centang : {{ checked }}
``` @@ -111,21 +111,21 @@ new Vue({ new Vue({ el: '#example-3', data: { - checkedNames: [] + checked: [] } }) ``` {% raw %}
- + - + - +
- Checked names: {{ checkedNames }} + Nama yang di centang : {{ checked }}