# Componente & Forme

Când folosim interpolarea obișnuită, se crează o relație unidirecțională, care modifică conținutul html de fiecare dată când modificăm variabila in JavaScript. Dar dacă vom încerca să modificăm valoarea dată în html (prin folosirea folosirea unui `<input>`), atunci modificările nu vor apărea în JavaScript.&#x20;

Decizia asta e din motive de performanță generală. Putem crea legături bidirecționale printr-o directivă specială - `v-model`

## Directiva v-model

Pentru elementele unui formular, putem crea o legătură bidirecțională cu proprietățile declarate în instanța Vue. Pentru aceasta, vom utiliza directiva `v-model`. Atunci când datele din formular sunt modificate, aceste date sunt procesate reactiv (instant) de către Vue.

În exemplul de mai jos, textul din `<input>` va fi procesat instant și va fi afișat în paragraful de mai jos.

```markup
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
```

![](/files/-MDWCtainoEokvH1ebyb)

#### Text cu mai multe linii

```markup
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
```

![](/files/-MDWH3l_5X2FdB8Ll9CI)

#### Checkbox

```markup
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
```

![](/files/-MDWLRygaf2JN_YJw_rC)

Valoarea afișată în `<label>` va fi `true` dacă checkbox-ul este bifat. În caz contrar va fi `false`.

#### Checkbox-uri multiple, care utilizează același array

```markup
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
```

![](/files/-MDWNrzbt-lmD3ojgst7)

`checkedNames` este un array (`checkedNames: []`) în care sunt incluse toate numele pentru care checkbox-ul este bifat.

#### Radio

```markup
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
```

![](/files/-MDWQ0Xasw_S3duFqZni)

#### Select

```markup
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
```

![](/files/-MDWQpFCJLFdsfZsQqA7)

## Submit

În cazul în care dorim să apelăm o metodă atunci când un formular este expediat, utilizăm evenimentul `v-on:submit` sau forma scurtă `@submit`.

```markup
<form
  id="app"
  @submit="checkForm"
  action="https://vuejs.org/"
  method="post"
>

<!-- elementele formularului -->

</form>
```

## Modificatori de evenimente

Uneori dorim să modificăm fluxul tratării unui eveniment. De exemplu, atunci când facem click pe un checkbox, în mod implicit checkbox-ul este bifat. Cu ajutorul modificatorului `preventDefault`, putem modifica fluxul astfel încât checkbox-ul să nu fie bifat.

```markup
<input type="checkbox" v-on:submit.prevent="onClick">
```

Atunci când se va face click pe checkbox, va fi apelară metoda `onClick`, fără ca checkboxul să fie bifat.

În Vue sunt următorii modificatori de evenimente:

* `.stop`
* `.prevent`
* `.capture`
* `.self`
* `.once`
* `.passive`

```markup
<!-- propagarea evenimentului de click va fi oprită -->
<a v-on:click.stop="doThis"></a>

<!-- evenimentul de submit nu va mai reîncărca pagina -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modificatorii pot fi înlănțuiți -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- doar modificatorul -->
<form v-on:submit.prevent></form>

<!-- folosește modul de captare când se adaugă un event listener -->
<!-- un eveniment care vizează un element din interior este tratat aici înainte de a fi gestionat de acel element -->
<div v-on:click.capture="doThis">...</div>

<!-- evenimentul este tratat doar dacă nu este generat de către un element din interior -->
<div v-on:click.self="doThat">...</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.girlsgoit.md/frontend-dinamic/vue.js/date-in-formular.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.