Я могу связать с другим входным атрибутом, кроме значения атрибута в vuejs

Question

Я новичок в веб-интерфейсе JavaScript. В настоящее время работаю над куском кода, и мне интересно, можно ли связать какой-либо другой входной атрибут, кроме value в v-model в VueJS. Вот что я имею в виду:

В моем HTML-код, я имею такой ввод:

<input type="checkbox" name="labels[]" id="label_{{$label->id}}" value="{{$label->id}} v-model="checked">

А потом я хочу, чтобы отмеченные элементы отображались по их именам ($label->name) но мне все еще нужно, чтобы их значения были их идентификаторами для бэкэнда.

<div v-for="label in checked" >@{{ label }}</div>

Это, конечно, возвращает идентификатор элемента, но мне нужно имя. Это возможно?

Answer 1

Ты можешь использовать true-value а также false-value:

<input 
 type="checkbox" 
 name="labels[]" 
 id="label_{{$label->id}}" 
 value="{{$label->id}}" 
 v-model="checked"
 true-value="{{$label->name}}"
 false-value="something else" 
 <!-- quote is not required inside true-value, false-value. 
  it will automatically set the type -->
>

Выдержка из документа:

Атрибуты true-value и false-value не влияют на атрибут value ввода, поскольку браузеры не включают непроверенные поля в представлениях формы.