Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form Input Bindings Guide [DONE] #32

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Form Input Bindings Guide [DONE] #32

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
32788f9
Form Input Bindings(Translate Title)
TanyMers Jan 16, 2018
1815f6f
Form Input Bindings(Basic Usage)
TanyMers Jan 16, 2018
633b98e
Form Input Bindings(Text)
TanyMers Jan 16, 2018
4d70b7d
Form Input Bindings(Multiline text)
TanyMers Jan 16, 2018
3f1aa0d
Form Input Bindings(Checkbox)
TanyMers Jan 18, 2018
2e66638
Form Input Bindings(Radio)
TanyMers Jan 18, 2018
4b6893a
Form Input Bindings(Select)
TanyMers Jan 18, 2018
d41c3ce
Form Input Bindings(Value Bindings)
TanyMers Jan 18, 2018
e4ca52c
Form Input Bindings(Checkbox.Radio)
TanyMers Jan 18, 2018
9693536
Form Input Bindings(Select Options)
TanyMers Jan 18, 2018
7c6f2b6
Form Input Bindings(Modifiers. `.lazy`)
TanyMers Jan 18, 2018
419aa26
Form Input Bindings(`.number`)
TanyMers Jan 18, 2018
5d497bd
Form Input Bindings(`.trim`. `v-model` with Components)
TanyMers Jan 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 67 additions & 67 deletions src/v2/guide/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
title: Form Input Bindings
title: Lucru cu Formularele
type: guide
order: 10
---

## Basic Usage
## Utilizare de Bază

You can use the `v-model` directive to create two-way data bindings on form input and textarea 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.
Puteți utiliza directiva `v-model` pentru a crea legături de date bidirecționale pe elementele de intrare și textarea formularului. Se alege automat modul corect de actualizare a elementului pe baza tipului de intrare. Deși un pic neobișnuit, `v-model` este în esență sintaxa "zahăr" pentru actualizarea datelor privind evenimentele de intrare ale utilizatorului, plus o îngrijire specială pentru unele cazuri de margine.

<p class="tip">`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.</p>
<p class="tip">`v-model` va ignora atributele inițiale `value`, `checked` sau `selected` găsite pe orice element ale formularului. Acesta va trata întotdeauna datele instanței Vue ca sursa adevarului. Ar trebui să declarați valoarea inițială pe partea JavaScript, în interiorul opțiunii `data` a componentei dvs.</p>

<p class="tip" id="vmodel-ime-tip">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.</p>
<p class="tip" id="vmodel-ime-tip">Pentru limbile care necesită o [IME](https://en.wikipedia.org/wiki/Input_method) (chineză, japoneză, coreeană etc.), veți observa că `v-model` nu se actualizează în timpul compoziţiei IME. Dacă doriți să satisfaceți și aceste actualizări, utilizați, un eveniment `input`.</p>

### Text

``` html
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="editează-mă">
<p>Mesajul este: {{ message }}</p>
```

{% raw %}
<div id="example-1" class="demo">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="editează-mă">
<p>Mesajul este: {{ message }}</p>
</div>
<script>
new Vue({
Expand All @@ -34,21 +34,21 @@ new Vue({
</script>
{% endraw %}

### Multiline text
### Text Multiline

``` html
<span>Multiline message is:</span>
<span>Mesajul multiline este:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<textarea v-model="message" placeholder="Adaugă linii multiple"></textarea>
```

{% raw %}
<div id="example-textarea" class="demo">
<span>Multiline message is:</span>
<span>Mesajul multiline este:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<textarea v-model="message" placeholder="Adaugă linii multiple"></textarea>
</div>
<script>
new Vue({
Expand All @@ -61,12 +61,12 @@ new Vue({
{% endraw %}

{% raw %}
<p class="tip">Interpolation on textareas (<code>&lt;textarea&gt;{{text}}&lt;/textarea&gt;</code>) won't work. Use <code>v-model</code> instead.</p>
<p class="tip">Interpolarea pe textarea (<code>&lt;textarea&gt;{{text}}&lt;/textarea&gt;</code>) nu va funcționa. Utilizați <code>v-model</code>.</p>
{% endraw %}

### Checkbox
### Casetă de selectare(Checkbox)

Single checkbox, boolean value:
Casetă de selectare(Checkbox) unică, valoare booleană:

``` html
<input type="checkbox" id="checkbox" v-model="checked">
Expand All @@ -87,7 +87,7 @@ new Vue({
</script>
{% endraw %}

Multiple checkboxes, bound to the same Array:
Casete de selectare multiple, legate la aceeași matrice(array):

``` html
<div id='example-3'>
Expand All @@ -98,7 +98,7 @@ Multiple checkboxes, bound to the same Array:
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<span>Nume bifate: {{ checkedNames }}</span>
</div>
```

Expand All @@ -120,7 +120,7 @@ new Vue({
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<span>Nume bifate: {{ checkedNames }}</span>
</div>
<script>
new Vue({
Expand All @@ -136,22 +136,22 @@ new Vue({

``` html
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<label for="one">Unu</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<label for="two">Doi</label>
<br>
<span>Picked: {{ picked }}</span>
<span>Selecţionat: {{ picked }}</span>
```
{% raw %}
<div id="example-4" class="demo">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<label for="one">Unu</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<label for="two">Doi</label>
<br>
<span>Picked: {{ picked }}</span>
<span>Selecţionat: {{ picked }}</span>
</div>
<script>
new Vue({
Expand All @@ -163,18 +163,18 @@ new Vue({
</script>
{% endraw %}

### Select
### Selectare

Single select:
Selectare unică:

``` html
<select v-model="selected">
<option disabled value="">Please select one</option>
<option disabled value="">Vă rugăm selectați o obțiune</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<span>Selectat: {{ selected }}</span>
```
``` js
new Vue({
Expand All @@ -187,12 +187,12 @@ new Vue({
{% raw %}
<div id="example-5" class="demo">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option disabled value="">Vă rugăm selectați o obțiune</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<span>Selectat: {{ selected }}</span>
</div>
<script>
new Vue({
Expand All @@ -204,9 +204,9 @@ new Vue({
</script>
{% endraw %}

<p class="tip">If the initial value of your `v-model` expression does not match any of the options, the `<select>` 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.</p>
<p class="tip">Dacă valoarea inițială a expresiei `v-model` nu se potrivește cu niciuna dintre opțiuni, elementul <select> va fi afișat într-o stare "neselectată". În iOS, acest lucru va face ca utilizatorul să nu poată selecta primul element, deoarece iOS nu declanșează un eveniment de schimbare în acest caz. Prin urmare, este recomandat să furnizați o opțiune dezactivată cu o valoare goală, așa cum este demonstrat în exemplul de mai sus.</p>

Multiple select (bound to Array):
Selectare multiplă (legat de Array):

``` html
<select v-model="selected" multiple>
Expand All @@ -215,7 +215,7 @@ Multiple select (bound to Array):
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
<span>Selectat: {{ selected }}</span>
```
{% raw %}
<div id="example-6" class="demo">
Expand All @@ -225,7 +225,7 @@ Multiple select (bound to Array):
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
<span>Selectat: {{ selected }}</span>
</div>
<script>
new Vue({
Expand All @@ -237,25 +237,25 @@ new Vue({
</script>
{% endraw %}

Dynamic options rendered with `v-for`:
Opțiuni dinamice rendate cu `v-for`:

``` html
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<span>Selectat: {{ selected }}</span>
```
``` js
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
{ text: 'Unu', value: 'A' },
{ text: 'Doi', value: 'B' },
{ text: 'Trei', value: 'C' }
]
}
})
Expand All @@ -267,41 +267,41 @@ new Vue({
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<span>Selectat: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#example-7',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
{ text: 'Unu', value: 'A' },
{ text: 'Doi', value: 'B' },
{ text: 'Trei', value: 'C' }
]
}
})
</script>
{% endraw %}

## Value Bindings
## Legarea Valorilor

For radio, checkbox and select options, the `v-model` binding values are usually static strings (or booleans for checkbox):
Pentru radio, caseta de selectare și opțiunile de selectare, valorile obligatorii `v-model` sunt, de obicei, șiruri statice (sau boolean pentru caseta de selectare):

``` html
<!-- `picked` is a string "a" when checked -->
<!-- `picked` este un șir "a" când este bifat -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` is either true or false -->
<!-- `toggle` este fie adevărat, fie fals -->
<input type="checkbox" v-model="toggle">

<!-- `selected` is a string "abc" when selected -->
<!-- `selected` este un șir "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
```

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.
Dar uneori am putea dori să legăm valoarea la o proprietate dinamică din instanța Vue. Putem folosi `v-bind` pentru a realiza acest lucru. În plus, `v-bind` ne permite să legăm valoarea de intrare la valori non-string.

### Checkbox

Expand All @@ -315,9 +315,9 @@ But sometimes we may want to bind the value to a dynamic property on the Vue ins
```

``` js
// when checked:
// când e bifat:
vm.toggle === vm.a
// when unchecked:
// când nu e bifat:
vm.toggle === vm.b
```

Expand All @@ -328,56 +328,56 @@ vm.toggle === vm.b
```

``` js
// when checked:
// când e bifat:
vm.pick === vm.a
```

### Select Options
### Opțiuni de Selectare

``` html
<select v-model="selected">
<!-- inline object literal -->
<!-- obiect literal în linie -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
```

``` js
// when selected:
typeof vm.selected // => 'object'
// când e selectat:
typeof vm.selected // => 'obiect'
vm.selected.number // => 123
```

## Modifiers
## Modificatorii

### `.lazy`

By default, `v-model` syncs the input with the data after each `input` event (with the exception of IME composition as [stated above](#vmodel-ime-tip)). You can add the `lazy` modifier to instead sync after `change` events:
În mod implicit, `v-model` sincronizează intrarea cu datele după fiecare eveniment de intrare (cu excepția compoziției IME ca [de mai sus](#vmodel-ime-tip)). Puteți adăuga modificatorul `lazy` în loc să se sincronizeze după evenimentele `change`:

``` html
<!-- synced after "change" instead of "input" -->
<!-- sincronizat după "change" în loc de "input" -->
<input v-model.lazy="msg" >
```

### `.number`

If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs:
Dacă doriți ca intrarea utilizatorului să fie difuzată automat ca număr, puteți adăuga modificatorul `number` la intrările gestionate de `v-model`:

``` html
<input v-model.number="age" type="number">
```

This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string.
Acest lucru este adesea util, deoarece chiar și cu `type="number"`, valoarea elementelor de intrare HTML întoarce întotdeauna un șir.

### `.trim`

If you want user input to be trimmed automatically, you can add the `trim` modifier to your `v-model` managed inputs:
Dacă doriți ca intrarea utilizatorului să fie tăiată în mod automat, puteți adăuga modificatorul `trim` la intrările gestionate de `v-model`:

```html
<input v-model.trim="msg">
```

## `v-model` with Components
## `v-model` cu Componente

> If you're not yet familiar with Vue's components, you can skip this for now.
> Dacă nu sunteți încă familiarizat cu componentele Vue, puteți trece peste acest lucru acum.

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#Form-Input-Components-using-Custom-Events) in the Components guide.
Tipurile de intrări integrate ale HTML-ului nu vor răspunde întotdeauna nevoilor dvs. Din fericire, componentele Vue vă permit să construiți intrări reutilizabile cu un comportament complet personalizat. Aceste intrări chiar funcționează cu `v-model`! Pentru a afla mai multe, citiți despre [intrările personalizate](components.html#Form-Input-Components-using-Custom-Events) din ghidul de Componente.