除了 vuejs 中的 value 属性，我可以绑定到其他输入属性吗

Question

我是前端 javascript 框架的新手。目前正在处理一段代码，如果可以在 VueJS 中将 value 以外的其他输入属性绑定到 v-model，我很想知道。这就是我的意思：

在我的 html 中，我有这样的输入：

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

然后我希望通过名称 ($label->name) 显示已检查的项目，但我仍然需要将它们的值作为后端的 id。

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

这当然会返回项目的 ID，但我需要名称。这可能吗？

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

摘自doc：

true-value 和 false-value 属性不会影响输入的 value 属性，因为浏览器不会在表单提交中包含未选中的框。