Powiązania danych wejściowych formularza #

Kiedy mamy do czynienia z formularzami na frontendzie, często musimy synchronizować stan elementów wejściowych formularza z odpowiadającym im stanem w JavaScript. Ręczne tworzenie wiązań wartości i nasłuchiwanie zdarzeń zmiany może być kłopotliwe:

<input
  :value="text"
  @input="event => text = event.target.value">

The v-model directive helps us simplify the above to:

<input v-model="text">

Dodatkowo, v-model może być używany na elementach wejściowych różnych typów, <textarea> i <select>. Automatycznie rozszerza się na różne pary właściwości DOM i zdarzeń, w zależności od elementu, na którym jest użyty:

• Elementy <input> z typami tekstowymi i <textarea> używają właściwości value i zdarzenia - <input type="checkbox"> i <input type="radio"> używają właściwości checked i zdarzenia change;
• <select> używa value jako prop i change jako event.

Podstawowe uycie #

Tekst #

<p>Wiadomością jest: {{ message }}</p>
<input v-model="message" placeholder="edytuj mnie" />

Tekst wielowierszowy #

<span>Wielowierszowa wiadomość to:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="dodaj wiele lini tekstu"></textarea>

Zauważ, że interpolacja wewnątrz <textarea> nie będzie działać. Zamiast tego należy użyć v-model.

<!-- źle -->
<textarea>{{ text }}</textarea>

<!-- dobrze -->
<textarea v-model="text"></textarea>

Pole wyboru #

Pojedyncze pole wyboru, wartość typu boolean:

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

Można także powiązać wiele pól wyboru z tą samą tablicą lub wartością Set:

const checkedNames = ref([])

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

<div>Zaznacz imiona: {{ checkedNames }}</div>

<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>

W tym przypadku tablica checkedNames będzie zawsze zawierała wartości z aktualnie zaznaczonych pól.

Radio #

<div>Wybrane: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

Select #

Pojedynczy select:

<div>Wybrane: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Wybór wielokrotny (związany z tablicą):

<div>Wybrane: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Opcje wyboru mogą być dynamicznie renderowane za pomocą v-for:

const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Wybrane: {{ selected }}</div>

Value Bindings #

For radio, checkbox and select options, the v-model binding values are usually static strings (or booleans for checkbox):

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` is a string "abc" when the first option is selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Czasami jednak możemy chcieć powiązać wartość z dynamiczną właściwością na bieżącej aktywnej instancji. Możemy użyć v-bind, aby to osiągnąć. Dodatkowo, użycie v-bind pozwala nam powiązać wartość wejściową z wartościami, które nie są ciągami znaków.

Checkbox #

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value i false-value są atrybutami specyficznymi dla Vue, które działają tylko z v-model. Tutaj wartość właściwości toggle będzie ustawiona na 'yes' gdy pole jest zaznaczone, i ustawiona na 'no' gdy jest odznaczone. Możesz także powiązać je z dynamicznymi wartościami używając v-bind:

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

Radio #

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick zostanie ustawiony na wartość first, gdy zostanie zaznaczone pierwsze wejście radiowe, oraz na wartość second, gdy zostanie zaznaczone drugie.

Select Options #

<select v-model="selected">
  <!-- inline object literal -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model obsługuje także wiązania wartości, które nie są ciągiem znaków! W powyższym przykładzie, gdy opcja zostanie wybrana, selected zostanie ustawiony na literalną wartość obiektu { liczba: 123 }.

Modyfikatory #

.lazy #

Domyślnie, v-model synchronizuje dane wejściowe z danymi po każdym zdarzeniu input (z wyjątkiem kompozycji IME, jak podano wyżej). Możesz dodać modyfikator lazy aby zamiast tego synchronizować po zdarzeniach change:

<!-- zsynchronizowane po "change" zamiast "input" -->
<input v-model.lazy="msg" />

.number #

Jeśli chcesz, aby dane wejściowe użytkownika były automatycznie zamieniane na liczbę, możesz dodać modyfikator number do danych wejściowych zarządzanych przez v-model:

<input v-model.number="age" />

Jeśli wartość nie może być przetworzona przy pomocy parseFloat(), to zamiast niej używana jest wartość oryginalna.

Modyfikator number jest stosowany automatycznie, jeśli dane wejściowe mają type="number".

.trim #

Jeśli chcesz, by białe spacje z danych wejściowych użytkownika były automatycznie obcinane, możesz dodać modyfikator trim do danych wejściowych zarządzanych przez v-model:

<input v-model.trim="msg" />

v-model z Komponentami #

Jeśli nie jesteś jeszcze zaznajomiony z komponentami Vue, możesz na razie pominąć tę część.

Wbudowane w HTML typy danych wejściowych nie zawsze spełniają Twoje potrzeby. Na szczęście, komponenty Vue pozwalają na budowanie wejść wielokrotnego użytku z całkowicie spersonalizowanym zachowaniem. Te dane wejściowe działają nawet z v-model! Aby dowiedzieć się więcej, przeczytaj o Użycie v-model w przewodniku po komponentach.