如何在VueJS的<md-select>组件上的v模型上返回对象？

Question

我正在使用Vue材质组件，并且可以选择一个值。情况是，当用户选择一个选项时，我获得了原始值（字符串，布尔值，数字），但是我想获得整个对象。

fetch

<div class="item-select-grupo-insumos"> <md-field> <label for="codigo-grupo-insumos">Grupo</label> <md-select name="codigo-grupo-insumos" id="codigo-grupo-insumos" v-model="formNewInsumo.codigoGrupoInsumos" // Here I would like get the whole object, but it get the unic value. md-dense > <md-option v-for="(grupo,idx) in gruposDeInsumos" :key="idx" :value="grupo.codigo" >{{grupo.codigo}} | {{grupo.nome}}</md-option> </md-select> </md-field> </div> ... data() { return { gruposDeInsumos: [{ codigo: "G00032", ​ nome: "asdasd", ​ tipo: "products" }], formNewInsumo: { nome: "", codigoGrupoInsumos: "", unidade: "", wholeObject: {} }, }

上使用的整个对象格式

v-for="(grupo,idx) in gruposDeInsumos"

Answer 1

您是否尝试过将对象作为“ md-option”中的值传递？
这样，该选项应采用对象的值而不是原始值。

<md-option
    v-for="(grupo,idx) in gruposDeInsumos"
    :key="idx"
    :value="grupo"
  >{{grupo.codigo}} | {{grupo.nome}}</md-option>